fix: always fetch fresh photo URLs for map markers instead of using stored HTTP URLs

Inspector now ignores sidebar widths when window is under 900px,
preventing it from being squeezed when sidebars are visually hidden
but their width values are still set.

.dockerignore

@@ -5,6 +5,24 @@ client/dist
 data
 uploads
 .git
+.github
 .env
+.env.*
 *.log
 *.md
+!client/**/*.md
+chart/
+docs/
+docker-compose.yml
+unraid-template.xml
+*.sqlite
+*.sqlite-shm
+*.sqlite-wal
+*.db
+*.db-shm
+*.db-wal
+coverage
+.DS_Store
+Thumbs.db
+.vscode
+.idea

.github/workflows/docker.yml

@@ -35,7 +35,7 @@ jobs:
         with:
           context: .
           platforms: ${{ matrix.platform }}
-          outputs: type=image,name=mauriceboe/nomad,push-by-digest=true,name-canonical=true,push=true
+          outputs: type=image,name=mauriceboe/trek,push-by-digest=true,name-canonical=true,push=true
           no-cache: true
 
       - name: Export digest
@@ -56,6 +56,12 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
+      - uses: actions/checkout@v4
+
+      - name: Get version from package.json
+        id: version
+        run: echo "VERSION=$(node -p "require('./server/package.json').version")" >> $GITHUB_OUTPUT
+
       - name: Download build digests
         uses: actions/download-artifact@v4
         with:
@@ -73,8 +79,13 @@ jobs:
       - name: Create and push multi-arch manifest
         working-directory: /tmp/digests
         run: |
-          mapfile -t digests < <(printf 'mauriceboe/nomad@sha256:%s\n' *)
-          docker buildx imagetools create -t mauriceboe/nomad:latest "${digests[@]}"
+          mapfile -t digests < <(printf 'mauriceboe/trek@sha256:%s\n' *)
+          docker buildx imagetools create \
+            -t mauriceboe/trek:latest \
+            -t mauriceboe/trek:${{ steps.version.outputs.VERSION }} \
+            -t mauriceboe/nomad:latest \
+            -t mauriceboe/nomad:${{ steps.version.outputs.VERSION }} \
+            "${digests[@]}"
 
       - name: Inspect manifest
-        run: docker buildx imagetools inspect mauriceboe/nomad:latest
+        run: docker buildx imagetools inspect mauriceboe/trek:latest

.gitignore

@@ -11,6 +11,9 @@ client/public/icons/*.png
 *.db
 *.db-shm
 *.db-wal
+*.sqlite
+*.sqlite-shm
+*.sqlite-wal
 
 # User data
 server/data/
@@ -28,6 +31,7 @@ Thumbs.db
 # IDE
 .vscode/
 .idea/
+.claude/
 
 # Logs
 logs

AUDIT_FINDINGS.md

@@ -0,0 +1,281 @@
+# TREK Security & Code Quality Audit
+
+**Date:** 2026-03-30
+**Auditor:** Automated comprehensive audit
+**Scope:** Full codebase — server, client, infrastructure, dependencies
+
+---
+
+## Table of Contents
+
+1. [Security](#1-security)
+2. [Code Quality](#2-code-quality)
+3. [Best Practices](#3-best-practices)
+4. [Dependency Hygiene](#4-dependency-hygiene)
+5. [Documentation & DX](#5-documentation--dx)
+6. [Testing](#6-testing)
+7. [Remediation Summary](#7-remediation-summary)
+
+---
+
+## 1. Security
+
+### 1.1 General
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| S-1 | **CRITICAL** | `server/src/middleware/auth.ts` | 17 | JWT `verify()` does not pin algorithm — accepts whatever algorithm is in the token header, potentially including `none`. | Pass `{ algorithms: ['HS256'] }` to all `jwt.verify()` calls. | FIXED |
+| S-2 | **HIGH** | `server/src/websocket.ts` | 56 | Same JWT verify without algorithm pinning in WebSocket auth. | Pin algorithm to HS256. | FIXED |
+| S-3 | **HIGH** | `server/src/middleware/mfaPolicy.ts` | 54 | Same JWT verify without algorithm pinning. | Pin algorithm to HS256. | FIXED |
+| S-4 | **HIGH** | `server/src/routes/oidc.ts` | 84-88 | OIDC `generateToken()` includes excessive claims (username, email, role) in JWT payload. If the JWT is leaked, this exposes PII. | Only include `{ id: user.id }` in token, consistent with auth.ts. | FIXED |
+| S-5 | **HIGH** | `client/src/api/websocket.ts` | 27 | Auth token passed in WebSocket URL query string (`?token=`). Tokens in URLs appear in server logs, proxy logs, and browser history. | Document as known limitation; WebSocket protocol doesn't easily support headers from browsers. Add `LOW` priority note to switch to message-based auth in the future. | DOCUMENTED |
+| S-6 | **HIGH** | `client/vite.config.js` | 47-56 | Service worker caches ALL `/api/.*` responses with `NetworkFirst`, including auth tokens, user data, budget, reservations. Data persists after logout. | Exclude sensitive API paths from caching: `/api/auth/.*`, `/api/admin/.*`, `/api/backup/.*`. | FIXED |
+| S-7 | **HIGH** | `client/vite.config.js` | 57-65 | User-uploaded files (possibly passport scans, booking confirmations) cached with `CacheFirst` for 30 days, persisting after logout. | Reduce cache lifetime; add note about clearing on logout. | FIXED |
+| S-8 | **MEDIUM** | `server/src/index.ts` | 60 | CSP allows `'unsafe-inline'` for scripts, weakening XSS protection. | Remove `'unsafe-inline'` from `scriptSrc` if Vite build doesn't require it. If needed for development, only allow in non-production. | FIXED |
+| S-9 | **MEDIUM** | `server/src/index.ts` | 64 | CSP `connectSrc` allows `http:` and `https:` broadly, permitting connections to any origin. | Restrict to known API domains (nominatim, overpass, Google APIs) or use `'self'` with specific external origins. | FIXED |
+| S-10 | **MEDIUM** | `server/src/index.ts` | 62 | CSP `imgSrc` allows `http:` broadly. | Restrict to `https:` and `'self'` plus known image domains. | FIXED |
+| S-11 | **MEDIUM** | `server/src/websocket.ts` | 84-90 | No message size limit on WebSocket messages. A malicious client could send very large messages to exhaust server memory. | Set `maxPayload` on WebSocketServer configuration. | FIXED |
+| S-12 | **MEDIUM** | `server/src/websocket.ts` | 84 | No rate limiting on WebSocket messages. A client can flood the server with join/leave messages. | Add per-connection message rate limiting. | FIXED |
+| S-13 | **MEDIUM** | `server/src/websocket.ts` | 29 | No origin validation on WebSocket connections. | Add origin checking against allowed origins. | FIXED |
+| S-14 | **MEDIUM** | `server/src/routes/auth.ts` | 157-163 | JWT tokens have 24h expiry with no refresh token mechanism. Long-lived tokens increase window of exposure if leaked. | Document as accepted risk for self-hosted app. Consider refresh tokens in future. | DOCUMENTED |
+| S-15 | **MEDIUM** | `server/src/routes/auth.ts` | 367-368 | Password change does not invalidate existing JWT tokens. Old tokens remain valid for up to 24h. | Implement token version/generation tracking, or reduce token expiry and add refresh tokens. | REQUIRES MANUAL REVIEW |
+| S-16 | **MEDIUM** | `server/src/services/mfaCrypto.ts` | 2, 5 | MFA encryption key is derived from JWT_SECRET. If JWT_SECRET is compromised, all MFA secrets are also compromised. Single point of failure. | Use a separate MFA_ENCRYPTION_KEY env var, or derive using a different salt/purpose. Current implementation with `:mfa:v1` salt is acceptable but tightly coupled. | DOCUMENTED |
+| S-17 | **MEDIUM** | `server/src/routes/maps.ts` | 429 | Google API key exposed in URL query string (`&key=${apiKey}`). Could appear in logs. | Use header-based auth (X-Goog-Api-Key) consistently. Already used elsewhere in the file. | FIXED |
+| S-18 | **MEDIUM** | `MCP.md` | 232-235 | Contains publicly accessible database download link with hardcoded credentials (`admin@admin.com` / `admin123`). | Remove credentials from documentation. | FIXED |
+| S-19 | **LOW** | `server/src/index.ts` | 229 | Error handler logs full error object including stack trace to console. In containerized deployments, this could leak to centralized logging. | Sanitize error logging in production. | FIXED |
+| S-20 | **LOW** | `server/src/routes/backup.ts` | 301-304 | Error detail leaked in non-production environments (`detail: process.env.NODE_ENV !== 'production' ? msg : undefined`). | Acceptable for dev, but ensure it's consistently not leaked in production. Already correct. | OK |
+
+### 1.2 Auth (JWT + OIDC + TOTP)
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| A-1 | **CRITICAL** | All jwt.verify calls | Multiple | JWT algorithm not pinned. `jsonwebtoken` library defaults to accepting the algorithm specified in the token header, which could include `none`. | Add `{ algorithms: ['HS256'] }` to every `jwt.verify()` call. | FIXED |
+| A-2 | **MEDIUM** | `server/src/routes/auth.ts` | 315-318 | MFA login token uses same JWT_SECRET and same `jwt.sign()`. Purpose field `mfa_login` prevents misuse but should use a shorter expiry. Currently 5m which is acceptable. | OK — 5 minute expiry is reasonable. | OK |
+| A-3 | **MEDIUM** | `server/src/routes/oidc.ts` | 113-143 | OIDC redirect URI is dynamically constructed from request headers (`x-forwarded-proto`, `x-forwarded-host`). An attacker who can control these headers could redirect the callback to a malicious domain. | Validate the constructed redirect URI against an allowlist, or use a configured base URL from env vars. | FIXED |
+| A-4 | **LOW** | `server/src/routes/auth.ts` | 21 | TOTP `window: 1` allows codes from adjacent time periods (±30s). This is standard and acceptable. | OK | OK |
+
+### 1.3 SQLite (better-sqlite3)
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| D-1 | **HIGH** | `server/src/routes/files.ts` | 90-91 | Dynamic SQL with `IN (${placeholders})` — however, placeholders are correctly generated from array length and values are parameterized. **Not an injection risk.** | OK — pattern is safe. | OK |
+| D-2 | **MEDIUM** | `server/src/routes/auth.ts` | 455 | Dynamic SQL `UPDATE users SET ${updates.join(', ')} WHERE id = ?` — column names come from controlled server-side code, not user input. Parameters are properly bound. | OK — column names are from a controlled set. | OK |
+| D-3 | **LOW** | `server/src/db/database.ts` | 26-28 | WAL mode and busy_timeout configured. Good. | OK | OK |
+
+### 1.4 WebSocket (ws)
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| W-1 | **MEDIUM** | `server/src/websocket.ts` | 29 | No `maxPayload` set on WebSocketServer. Default is 100MB which is excessive. | Set `maxPayload: 64 * 1024` (64KB). | FIXED |
+| W-2 | **MEDIUM** | `server/src/websocket.ts` | 84-110 | Only `join` and `leave` message types are handled; unknown types are silently ignored. This is acceptable but there is no schema validation on the message structure. | Add basic type/schema validation using Zod. | FIXED |
+| W-3 | **LOW** | `server/src/websocket.ts` | 88 | `JSON.parse` errors are silently caught with empty catch. | Log malformed messages at debug level. | FIXED |
+
+### 1.5 Express
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| E-1 | **LOW** | `server/src/index.ts` | 82 | Body parser limit set to 100KB. Good. | OK | OK |
+| E-2 | **LOW** | `server/src/index.ts` | 14-16 | Trust proxy configured conditionally. Good. | OK | OK |
+| E-3 | **LOW** | `server/src/index.ts` | 121-136 | Path traversal protection on uploads endpoint. Uses `path.basename` and `path.resolve` check. Good. | OK | OK |
+
+### 1.6 PWA / Workbox
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| P-1 | **HIGH** | `client/vite.config.js` | 47-56 | API response caching includes sensitive endpoints. | Exclude auth, admin, backup, and settings endpoints from caching. | FIXED |
+| P-2 | **MEDIUM** | `client/vite.config.js` | 23, 31, 42, 54, 63 | `cacheableResponse: { statuses: [0, 200] }` — status 0 represents opaque responses which may cache error responses silently. | Remove status 0 from API and upload caches (keep for CDN/map tiles where CORS may return opaque responses). | FIXED |
+| P-3 | **MEDIUM** | `client/src/store/authStore.ts` | 126-135 | Logout does not clear service worker caches. Sensitive data persists after logout. | Clear CacheStorage for `api-data` and `user-uploads` caches on logout. | FIXED |
+
+---
+
+## 2. Code Quality
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| Q-1 | **MEDIUM** | `client/src/store/authStore.ts` | 153-161 | `loadUser` silently catches all errors and logs user out. A transient network failure logs the user out. | Only logout on 401 responses, not on network errors. | FIXED |
+| Q-2 | **MEDIUM** | `client/src/hooks/useRouteCalculation.ts` | 36 | `useCallback` depends on entire `tripStore` object, defeating memoization. | Select only needed properties from the store. | DOCUMENTED |
+| Q-3 | **MEDIUM** | `client/src/hooks/useTripWebSocket.ts` | 14 | `collabFileSync` captures stale `tripStore` reference from initial render. | Use `useTripStore.getState()` instead. | DOCUMENTED |
+| Q-4 | **MEDIUM** | `client/src/store/authStore.ts` | 38 vs 105 | `register` function accepts 4 params but TypeScript interface only declares 3. | Update interface to include optional `invite_token`. | FIXED |
+| Q-5 | **LOW** | `client/src/store/slices/filesSlice.ts` | — | Empty catch block on file link operation (`catch {}`). | Log error. | DOCUMENTED |
+| Q-6 | **LOW** | `client/src/App.tsx` | 101, 108 | Empty catch blocks silently swallow errors. | Add minimal error logging. | DOCUMENTED |
+| Q-7 | **LOW** | `client/src/App.tsx` | 155 | `RegisterPage` imported but never used — `/register` route renders `LoginPage`. | Remove unused import. | FIXED |
+| Q-8 | **LOW** | `client/tsconfig.json` | 14 | `strict: false` disables TypeScript strict mode. | Enable strict mode and fix resulting type errors. | REQUIRES MANUAL REVIEW |
+| Q-9 | **LOW** | `client/src/main.tsx` | 7 | Non-null assertion on `getElementById('root')!`. | Add null check. | DOCUMENTED |
+| Q-10 | **LOW** | `server/src/routes/files.ts` | 278 | Empty catch block on file link insert (`catch {}`). | Log duplicate link errors. | FIXED |
+| Q-11 | **LOW** | `server/src/db/database.ts` | 20-21 | Silent catch on WAL checkpoint in `initDb`. | Log warning on failure. | DOCUMENTED |
+
+---
+
+## 3. Best Practices
+
+### 3.1 Node / Express
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| B-1 | **LOW** | `server/src/index.ts` | 251-271 | Graceful shutdown implemented with SIGTERM/SIGINT handlers. Good — closes DB, HTTP server, with 10s timeout. | OK | OK |
+| B-2 | **LOW** | `server/src/index.ts` | 87-112 | Debug logging redacts sensitive fields. Good. | OK | OK |
+
+### 3.2 React / Vite
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| V-1 | **MEDIUM** | `client/vite.config.js` | — | No explicit `build.sourcemap: false` for production. Source maps may be generated. | Add `build: { sourcemap: false }` to Vite config. | FIXED |
+| V-2 | **LOW** | `client/index.html` | 24 | Leaflet CSS loaded from unpkg CDN without Subresource Integrity (SRI) hash. | Add `integrity` and `crossorigin` attributes. | FIXED |
+
+### 3.3 Docker
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| K-1 | **MEDIUM** | `Dockerfile` | 2, 10 | Base images use floating tags (`node:22-alpine`), not pinned to digest. | Pin to specific digest for reproducible builds. | DOCUMENTED |
+| K-2 | **MEDIUM** | `Dockerfile` | — | No `HEALTHCHECK` instruction. Only docker-compose has health check. | Add `HEALTHCHECK` to Dockerfile for standalone deployments. | FIXED |
+| K-3 | **LOW** | `.dockerignore` | — | Missing exclusions for `chart/`, `docs/`, `.github/`, `docker-compose.yml`, `*.sqlite*`. | Add missing exclusions. | FIXED |
+
+### 3.4 docker-compose.yml
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| C-1 | **HIGH** | `docker-compose.yml` | 25 | `JWT_SECRET` defaults to empty string if not set. App auto-generates one, but it changes on restart, invalidating all sessions. | Log a prominent warning on startup if JWT_SECRET is auto-generated. | FIXED |
+| C-2 | **MEDIUM** | `docker-compose.yml` | — | No resource limits defined for the `app` service. | Add `deploy.resources.limits` section. | DOCUMENTED |
+
+### 3.5 Git Hygiene
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| G-1 | **HIGH** | `.gitignore` | 12-14 | Missing `*.sqlite`, `*.sqlite-wal`, `*.sqlite-shm` patterns. Only `*.db` variants covered. | Add sqlite patterns. | FIXED |
+| G-2 | **LOW** | — | — | No `.env` or `.sqlite` files found in git history. | OK | OK |
+
+### 3.6 Helm Chart
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| H-1 | **MEDIUM** | `chart/templates/secret.yaml` | 22 | `randAlphaNum 32` generates a new JWT secret on every `helm upgrade`, invalidating all sessions. | Use `lookup` to preserve existing secret across upgrades. | FIXED |
+| H-2 | **MEDIUM** | `chart/values.yaml` | 3 | Default image tag is `latest`. | Use a specific version tag. | DOCUMENTED |
+| H-3 | **MEDIUM** | `chart/templates/deployment.yaml` | — | No `securityContext` on pod or container. Runs as root by default. | Add `runAsNonRoot: true`, `runAsUser: 1000`. | FIXED |
+| H-4 | **MEDIUM** | `chart/templates/pvc.yaml` | — | PVC always created regardless of `.Values.persistence.enabled`. | Add conditional check. | FIXED |
+| H-5 | **LOW** | `chart/values.yaml` | 41 | `resources: {}` — no default resource requests or limits. | Add sensible defaults. | FIXED |
+
+---
+
+## 4. Dependency Hygiene
+
+### 4.1 npm audit
+
+| Package | Severity | Description | Status |
+|---------|----------|-------------|--------|
+| `serialize-javascript` (via vite-plugin-pwa → workbox-build → @rollup/plugin-terser) | **HIGH** | RCE via RegExp.flags / CPU exhaustion DoS | Fix requires `vite-plugin-pwa` major version upgrade. | DOCUMENTED |
+| `picomatch` (via @rollup/pluginutils, tinyglobby) | **MODERATE** | ReDoS via extglob quantifiers | `npm audit fix` available. | FIXED |
+
+**Server:** 0 vulnerabilities.
+
+### 4.2 Outdated Dependencies (Notable)
+
+| Package | Current | Latest | Risk | Status |
+|---------|---------|--------|------|--------|
+| `express` | ^4.18.3 | 5.2.1 | Major version — breaking changes | DOCUMENTED |
+| `uuid` | ^9.0.0 | 13.0.0 | Major version | DOCUMENTED |
+| `dotenv` | ^16.4.1 | 17.3.1 | Major version | DOCUMENTED |
+| `lucide-react` | ^0.344.0 | 1.7.0 | Major version | DOCUMENTED |
+| `react` | ^18.2.0 | 19.2.4 | Major version | DOCUMENTED |
+| `zustand` | ^4.5.2 | 5.0.12 | Major version | DOCUMENTED |
+
+> Major version upgrades require manual evaluation and testing. Not applied in this remediation pass.
+
+---
+
+## 5. Documentation & DX
+
+| # | Severity | File | Description | Recommended Fix | Status |
+|---|----------|------|-------------|-----------------|--------|
+| X-1 | **MEDIUM** | `server/.env.example` | Missing many env vars documented in README: `OIDC_*`, `FORCE_HTTPS`, `TRUST_PROXY`, `DEMO_MODE`, `TZ`, `ALLOWED_ORIGINS`, `DEBUG`. | Add all configurable env vars. | FIXED |
+| X-2 | **MEDIUM** | `server/.env.example` | JWT_SECRET placeholder is `your-super-secret-jwt-key-change-in-production` — easily overlooked. | Use `CHANGEME_GENERATE_WITH_openssl_rand_hex_32`. | FIXED |
+| X-3 | **LOW** | `server/.env.example` | `PORT=3001` differs from Docker default of `3000`. | Align to `3000`. | FIXED |
+
+---
+
+## 6. Testing
+
+| # | Severity | Description | Status |
+|---|----------|-------------|--------|
+| T-1 | **HIGH** | No test files found anywhere in the repository. Zero test coverage for auth flows, WebSocket handling, SQLite queries, API routes, or React components. | REQUIRES MANUAL REVIEW |
+| T-2 | **HIGH** | No test framework configured (no jest, vitest, or similar in dependencies). | REQUIRES MANUAL REVIEW |
+| T-3 | **MEDIUM** | No CI step runs tests before building Docker image. | DOCUMENTED |
+
+---
+
+## 7. Remediation Summary
+
+### Applied Fixes
+
+- **Immich SSRF prevention** — Added URL validation on save (block private IPs, metadata endpoints, non-HTTP protocols)
+- **Immich API key isolation** — Removed `userId` query parameter from asset proxy endpoints; all Immich requests now use authenticated user's own credentials only
+- **Immich asset ID validation** — Added alphanumeric pattern validation to prevent path traversal in proxied URLs
+- **JWT algorithm pinning** — Added `{ algorithms: ['HS256'] }` to all `jwt.verify()` calls (auth middleware, MFA policy, WebSocket, OIDC, auth routes)
+- **OIDC token payload** — Reduced to `{ id }` only, matching auth.ts pattern
+- **OIDC redirect URI validation** — Validates against `APP_URL` env var when set
+- **WebSocket hardening** — Added `maxPayload: 64KB`, message rate limiting (30 msg/10s), origin validation, improved message validation
+- **CSP tightening** — Removed `'unsafe-inline'` from scripts in production, restricted `connectSrc` and `imgSrc` to known domains
+- **PWA cache security** — Excluded sensitive API paths from caching, removed opaque response caching for API/uploads, clear caches on logout
+- **Service worker cache cleanup on logout**
+- **Google API key** — Moved from URL query string to header in maps photo endpoint
+- **MCP.md credentials** — Removed hardcoded demo credentials
+- **.gitignore** — Added `*.sqlite*` patterns
+- **.dockerignore** — Added missing exclusions
+- **Dockerfile** — Added HEALTHCHECK instruction
+- **Helm chart** — Fixed secret rotation, added securityContext, conditional PVC, resource defaults
+- **Vite config** — Disabled source maps in production
+- **CDN integrity** — Added SRI hash for Leaflet CSS
+- **.env.example** — Complete with all env vars
+- **Various code quality fixes** — Removed dead imports, fixed empty catch blocks, fixed auth store interface
+
+### Requires Manual Review
+
+- Password change should invalidate existing tokens (S-15)
+- TypeScript strict mode should be enabled (Q-8)
+- Test suite needs to be created from scratch (T-1, T-2)
+- Major dependency upgrades (express 5, React 19, zustand 5, etc.)
+- `serialize-javascript` vulnerability fix requires vite-plugin-pwa major upgrade
+
+### 1.7 Immich Integration
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| I-1 | **CRITICAL** | `server/src/routes/immich.ts` | 38-39, 85, 199, 250, 274 | SSRF via user-controlled `immich_url`. Users can set any URL which is then used in `fetch()` calls, allowing requests to internal metadata endpoints (169.254.169.254), localhost services, etc. | Validate URL on save: require HTTP(S) protocol, block private/internal IPs. | FIXED |
+| I-2 | **CRITICAL** | `server/src/routes/immich.ts` | 194-196, 244-246, 269-270 | Asset info/thumbnail/original endpoints accept `userId` query param, allowing any authenticated user to proxy requests through another user's Immich API key. This exposes other users' Immich credentials and photo libraries. | Restrict all Immich proxy endpoints to the authenticated user's own credentials only. | FIXED |
+| I-3 | **MEDIUM** | `server/src/routes/immich.ts` | 199, 250, 274 | `assetId` URL parameter used directly in `fetch()` URL construction. Path traversal characters could redirect requests to unintended Immich API endpoints. | Validate assetId matches `[a-zA-Z0-9_-]+` pattern. | FIXED |
+
+### 1.8 Admin Routes
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| AD-1 | **MEDIUM** | `server/src/routes/admin.ts` | 302-310 | Self-update endpoint runs `git pull` then `npm run build`. While admin-only and `npm install` uses `--ignore-scripts`, `npm run build` executes whatever is in the pulled package.json. A compromised upstream could execute arbitrary code. | Document as accepted risk for self-hosted self-update feature. Users should pin to specific versions. | DOCUMENTED |
+
+### 1.9 Client-Side XSS
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| X-1 | **CRITICAL** | `client/src/components/Admin/GitHubPanel.tsx` | 66, 106 | `dangerouslySetInnerHTML` with `inlineFormat()` renders GitHub release notes as HTML without escaping. Malicious HTML in release notes could execute scripts. | Escape HTML entities before applying markdown-style formatting. Validate link URLs. | FIXED |
+| X-2 | **LOW** | `client/src/components/Map/MapView.tsx` | divIcon | Uses `escAttr()` for HTML sanitization in divIcon strings. Properly mitigated. | OK | OK |
+
+### 1.10 Route Calculator Bug
+
+| # | Severity | File | Line(s) | Description | Recommended Fix | Status |
+|---|----------|------|---------|-------------|-----------------|--------|
+| RC-1 | **HIGH** | `client/src/components/Map/RouteCalculator.ts` | 16 | OSRM URL hardcodes `'driving'` profile, ignoring the `profile` parameter. Walking/cycling routes always return driving results. | Use the `profile` parameter in URL construction. | FIXED |
+
+### Additional Findings (from exhaustive scan)
+
+- **MEDIUM** — `server/src/index.ts:121-136`: Upload files (`/uploads/:type/:filename`) served without authentication. UUIDs are unguessable but this is security-through-obscurity. **REQUIRES MANUAL REVIEW** — adding auth would break shared trip image URLs.
+- **MEDIUM** — `server/src/routes/oidc.ts:194`: OIDC token exchange error was logging full token response (potentially including access tokens). **FIXED** — now logs only HTTP status.
+- **MEDIUM** — `server/src/services/notifications.ts:194-196`: Email body is not HTML-escaped. User-generated content (trip names, usernames) interpolated directly into HTML email template. Potential stored XSS in email clients. **DOCUMENTED** — needs HTML entity escaping.
+- **LOW** — `server/src/demo/demo-seed.ts:7-9`: Hardcoded demo credentials (`demo12345`, `admin12345`). Intentional for demo mode but dangerous if DEMO_MODE accidentally left on in production. Already has startup warning.
+- **LOW** — `server/src/routes/auth.ts:742`: MFA setup returns plaintext TOTP secret to client. This is standard TOTP enrollment flow — users need the secret for manual entry. Must be served over HTTPS.
+- **LOW** — `server/src/routes/auth.ts:473`: Admin settings GET returns API keys in full (not masked). Only accessible to admins.
+- **LOW** — `server/src/routes/auth.ts:564`: SMTP password stored as plaintext in `app_settings` table. Masked in API response but unencrypted at rest.
+
+### Accepted Risks (Documented)
+
+- WebSocket token in URL query string (browser limitation)
+- 24h JWT expiry without refresh tokens (acceptable for self-hosted)
+- MFA encryption key derived from JWT_SECRET (noted coupling)
+- localStorage for token storage (standard SPA pattern)
+- Upload files served without auth (UUID-based obscurity, needed for shared trips)

Dockerfile

@@ -1,4 +1,4 @@
-# Stage 1: React Client bauen
+# Stage 1: Build React client
 FROM node:22-alpine AS client-builder
 WORKDIR /app/client
 COPY client/package*.json ./
@@ -6,34 +6,32 @@ RUN npm ci
 COPY client/ ./
 RUN npm run build
 
-# Stage 2: Produktions-Server
+# Stage 2: Production server
 FROM node:22-alpine
 
 WORKDIR /app
 
-# Server-Dependencies installieren (better-sqlite3 braucht Build-Tools)
+# Timezone support + native deps (better-sqlite3 needs build tools)
 COPY server/package*.json ./
-RUN apk add --no-cache python3 make g++ && \
+RUN apk add --no-cache tzdata dumb-init su-exec python3 make g++ && \
     npm ci --production && \
     apk del python3 make g++
 
-# Server-Code kopieren
 COPY server/ ./
-
-# Gebauten Client kopieren
 COPY --from=client-builder /app/client/dist ./public
-
-# Fonts für PDF-Export kopieren
 COPY --from=client-builder /app/client/public/fonts ./public/fonts
 
-# Verzeichnisse erstellen + Symlink für Abwärtskompatibilität (alte docker-compose mounten nach /app/server/uploads)
-RUN mkdir -p /app/data /app/uploads/files /app/uploads/covers /app/uploads/avatars /app/uploads/photos && \
-    mkdir -p /app/server && ln -s /app/uploads /app/server/uploads && ln -s /app/data /app/server/data
+RUN mkdir -p /app/data/logs /app/uploads/files /app/uploads/covers /app/uploads/avatars /app/uploads/photos && \
+    mkdir -p /app/server && ln -s /app/uploads /app/server/uploads && ln -s /app/data /app/server/data && \
+    chown -R node:node /app
 
-# Umgebung setzen
 ENV NODE_ENV=production
 ENV PORT=3000
 
 EXPOSE 3000
 
-CMD ["node", "--import", "tsx", "src/index.ts"]
+HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
+  CMD wget -qO- http://localhost:3000/api/health || exit 1
+
+ENTRYPOINT ["dumb-init", "--"]
+CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; exec su-exec node node --import tsx src/index.ts"]

MCP.md

@@ -0,0 +1,234 @@
+# MCP Integration
+
+TREK includes a built-in [Model Context Protocol](https://modelcontextprotocol.io/) (MCP) server that lets AI
+assistants — such as Claude Desktop, Cursor, or any MCP-compatible client — read and modify your trip data through a
+structured API.
+
+> **Note:** MCP is an addon that must be enabled by your TREK administrator before it becomes available.
+
+## Table of Contents
+
+- [Setup](#setup)
+- [Limitations & Important Notes](#limitations--important-notes)
+- [Resources (read-only)](#resources-read-only)
+- [Tools (read-write)](#tools-read-write)
+- [Example](#example)
+
+---
+
+## Setup
+
+### 1. Enable the MCP addon (admin)
+
+An administrator must first enable the MCP addon from the **Admin Panel > Addons** page. Until enabled, the `/mcp`
+endpoint returns `403 Forbidden` and the MCP section does not appear in user settings.
+
+### 2. Create an API token
+
+Once MCP is enabled, go to **Settings > MCP Configuration** and create an API token:
+
+1. Click **Create New Token**
+2. Give it a descriptive name (e.g. "Claude Desktop", "Work laptop")
+3. **Copy the token immediately** — it is shown only once and cannot be recovered
+
+Each user can create up to **10 tokens**.
+
+### 3. Configure your MCP client
+
+The Settings page shows a ready-to-copy client configuration snippet. For **Claude Desktop**, add the following to your
+`claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "trek": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://your-trek-instance.com/mcp",
+        "--header",
+        "Authorization: Bearer trek_your_token_here"
+      ]
+    }
+  }
+}
+```
+
+> The path to `npx` may need to be adjusted for your system (e.g. `C:\PROGRA~1\nodejs\npx.cmd` on Windows).
+
+---
+
+## Limitations & Important Notes
+
+| Limitation                              | Details                                                                                                                                          |
+|-----------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
+| **Admin activation required**           | The MCP addon must be enabled by an admin before any user can access it.                                                                         |
+| **Per-user scoping**                    | Each MCP session is scoped to the authenticated user. You can only access trips you own or are a member of.                                      |
+| **No image uploads**                    | Cover images cannot be set through MCP. Use the web UI to upload trip covers.                                                                    |
+| **Reservations are created as pending** | When the AI creates a reservation, it starts with `pending` status. You must confirm it manually or ask the AI to set the status to `confirmed`. |
+| **Demo mode restrictions**              | If TREK is running in demo mode, all write operations through MCP are blocked.                                                                   |
+| **Rate limiting**                       | 60 requests per minute per user. Exceeding this returns a `429` error.                                                                           |
+| **Session limits**                      | Maximum 5 concurrent MCP sessions per user. Sessions expire after 1 hour of inactivity.                                                          |
+| **Token limits**                        | Maximum 10 API tokens per user.                                                                                                                  |
+| **Token revocation**                    | Deleting a token immediately terminates all active MCP sessions for that user.                                                                   |
+| **Real-time sync**                      | Changes made through MCP are broadcast to all connected clients in real-time via WebSocket, just like changes made through the web UI.           |
+
+---
+
+## Resources (read-only)
+
+Resources provide read-only access to your TREK data. MCP clients can read these to understand the current state before
+making changes.
+
+| Resource          | URI                                        | Description                                               |
+|-------------------|--------------------------------------------|-----------------------------------------------------------|
+| Trips             | `trek://trips`                             | All trips you own or are a member of                      |
+| Trip Detail       | `trek://trips/{tripId}`                    | Single trip with metadata and member count                |
+| Days              | `trek://trips/{tripId}/days`               | Days of a trip with their assigned places                 |
+| Places            | `trek://trips/{tripId}/places`             | All places/POIs saved in a trip                           |
+| Budget            | `trek://trips/{tripId}/budget`             | Budget and expense items                                  |
+| Packing           | `trek://trips/{tripId}/packing`            | Packing checklist                                         |
+| Reservations      | `trek://trips/{tripId}/reservations`       | Flights, hotels, restaurants, etc.                        |
+| Day Notes         | `trek://trips/{tripId}/days/{dayId}/notes` | Notes for a specific day                                  |
+| Accommodations    | `trek://trips/{tripId}/accommodations`     | Hotels/rentals with check-in/out details                  |
+| Members           | `trek://trips/{tripId}/members`            | Owner and collaborators                                   |
+| Collab Notes      | `trek://trips/{tripId}/collab-notes`       | Shared collaborative notes                                |
+| Categories        | `trek://categories`                        | Available place categories (for use when creating places) |
+| Bucket List       | `trek://bucket-list`                       | Your personal travel bucket list                          |
+| Visited Countries | `trek://visited-countries`                 | Countries marked as visited in Atlas                      |
+
+---
+
+## Tools (read-write)
+
+TREK exposes **34 tools** organized by feature area. Use `get_trip_summary` as a starting point — it returns everything
+about a trip in a single call.
+
+### Trip Summary
+
+| Tool               | Description                                                                                                                                                                                              |
+|--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `get_trip_summary` | Full denormalized snapshot of a trip: metadata, members, days with assignments and notes, accommodations, budget totals, packing stats, reservations, and collab notes. Use this as your context loader. |
+
+### Trips
+
+| Tool          | Description                                                                                 |
+|---------------|---------------------------------------------------------------------------------------------|
+| `list_trips`  | List all trips you own or are a member of. Supports `include_archived` flag.                |
+| `create_trip` | Create a new trip with title, dates, currency. Days are auto-generated from the date range. |
+| `update_trip` | Update a trip's title, description, dates, or currency.                                     |
+| `delete_trip` | Delete a trip. **Owner only.**                                                              |
+
+### Places
+
+| Tool           | Description                                                                       |
+|----------------|-----------------------------------------------------------------------------------|
+| `create_place` | Add a place/POI with name, coordinates, address, category, notes, website, phone. |
+| `update_place` | Update any field of an existing place.                                            |
+| `delete_place` | Remove a place from a trip.                                                       |
+
+### Day Planning
+
+| Tool                      | Description                                                                   |
+|---------------------------|-------------------------------------------------------------------------------|
+| `assign_place_to_day`     | Pin a place to a specific day in the itinerary.                               |
+| `unassign_place`          | Remove a place assignment from a day.                                         |
+| `reorder_day_assignments` | Reorder places within a day by providing assignment IDs in the desired order. |
+| `update_assignment_time`  | Set start/end times for a place assignment (e.g. "09:00" – "11:30").          |
+| `update_day`              | Set or clear a day's title (e.g. "Arrival in Paris", "Free day").             |
+
+### Reservations
+
+| Tool                       | Description                                                                                                                                                                                   |
+|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `create_reservation`       | Create a pending reservation. Supports flights, hotels, restaurants, trains, cars, cruises, events, tours, activities, and other types. Hotels can be linked to places and check-in/out days. |
+| `update_reservation`       | Update any field including status (`pending` / `confirmed` / `cancelled`).                                                                                                                    |
+| `delete_reservation`       | Delete a reservation and its linked accommodation record if applicable.                                                                                                                       |
+| `link_hotel_accommodation` | Set or update a hotel reservation's check-in/out day links and associated place.                                                                                                              |
+
+### Budget
+
+| Tool                 | Description                                                  |
+|----------------------|--------------------------------------------------------------|
+| `create_budget_item` | Add an expense with name, category, and price.               |
+| `update_budget_item` | Update an expense's details, split (persons/days), or notes. |
+| `delete_budget_item` | Remove a budget item.                                        |
+
+### Packing
+
+| Tool                  | Description                                                  |
+|-----------------------|--------------------------------------------------------------|
+| `create_packing_item` | Add an item to the packing checklist with optional category. |
+| `update_packing_item` | Rename an item or change its category.                       |
+| `toggle_packing_item` | Check or uncheck a packing item.                             |
+| `delete_packing_item` | Remove a packing item.                                       |
+
+### Day Notes
+
+| Tool              | Description                                                           |
+|-------------------|-----------------------------------------------------------------------|
+| `create_day_note` | Add a note to a specific day with optional time label and emoji icon. |
+| `update_day_note` | Edit a day note's text, time, or icon.                                |
+| `delete_day_note` | Remove a note from a day.                                             |
+
+### Collab Notes
+
+| Tool                 | Description                                                                                     |
+|----------------------|-------------------------------------------------------------------------------------------------|
+| `create_collab_note` | Create a shared note visible to all trip members. Supports title, content, category, and color. |
+| `update_collab_note` | Edit a collab note's content, category, color, or pin status.                                   |
+| `delete_collab_note` | Delete a collab note and its associated files.                                                  |
+
+### Bucket List
+
+| Tool                      | Description                                                                                |
+|---------------------------|--------------------------------------------------------------------------------------------|
+| `create_bucket_list_item` | Add a destination to your personal bucket list with optional coordinates and country code. |
+| `delete_bucket_list_item` | Remove an item from your bucket list.                                                      |
+
+### Atlas
+
+| Tool                     | Description                                                                    |
+|--------------------------|--------------------------------------------------------------------------------|
+| `mark_country_visited`   | Mark a country as visited using its ISO 3166-1 alpha-2 code (e.g. "FR", "JP"). |
+| `unmark_country_visited` | Remove a country from your visited list.                                       |
+
+---
+
+## Example
+
+Conversation with Claude: https://claude.ai/share/51572203-6a4d-40f8-a6bd-eba09d4b009d
+
+Initial prompt (1st message):
+
+```
+I'd like to plan a week-long trip to Kyoto, Japan, arriving April 5 2027
+and leaving April 11 2027. It's cherry blossom season so please keep that
+in mind when picking spots.
+
+Before writing anything to TREK, do some research: look up what's worth
+visiting, figure out a logical day-by-day flow (group nearby spots together
+to avoid unnecessary travel), find a well-reviewed hotel in a central
+neighbourhood, and think about what kind of food and restaurant experiences
+are worth including.
+
+Once you have a solid plan, write the whole thing to TREK:
+- Create the trip
+- Add all the places you've researched with their real coordinates
+- Build out the daily itinerary with sensible visiting times
+- Book the hotel as a reservation and link it properly to the accommodation days
+- Add any notable restaurant reservations
+- Put together a realistic budget in EUR
+- Build a packing list suited to April in Kyoto
+- Leave a pinned collab note with practical tips (transport, etiquette, money, etc.)
+- Add a day note for each day with any important heads-up (early start, crowd
+  tips, booking requirements, etc.)
+- Mark Japan as visited in my Atlas
+
+Currency: CHF. Use get_trip_summary at the end and give me a quick recap
+of everything that was added.
+```
+
+PDF of the generated trip: [./docs/TREK-Generated-by-MCP.pdf](./docs/TREK-Generated-by-MCP.pdf)
+
+![trip](./docs/screenshot-trip-mcp.png)

README.md

@@ -2,27 +2,27 @@
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="client/public/logo-light.svg" />
     <source media="(prefers-color-scheme: light)" srcset="client/public/logo-dark.svg" />
-    <img src="client/public/logo-light.svg" alt="NOMAD" height="60" />
+    <img src="client/public/logo-light.svg" alt="TREK" height="60" />
   </picture>
   <br />
-  <em>Navigation Organizer for Maps, Activities & Destinations</em>
+  <em>Your Trips. Your Plan.</em>
 </p>
 
 <p align="center">
   <a href="LICENSE"><img src="https://img.shields.io/badge/License-AGPL_v3-blue.svg" alt="License: AGPL v3" /></a>
-  <a href="https://hub.docker.com/r/mauriceboe/nomad"><img src="https://img.shields.io/docker/pulls/mauriceboe/nomad" alt="Docker Pulls" /></a>
-  <a href="https://github.com/mauriceboe/NOMAD"><img src="https://img.shields.io/github/stars/mauriceboe/NOMAD" alt="GitHub Stars" /></a>
-  <a href="https://github.com/mauriceboe/NOMAD/commits"><img src="https://img.shields.io/github/last-commit/mauriceboe/NOMAD" alt="Last Commit" /></a>
+  <a href="https://hub.docker.com/r/mauriceboe/trek"><img src="https://img.shields.io/docker/pulls/mauriceboe/trek" alt="Docker Pulls" /></a>
+  <a href="https://github.com/mauriceboe/TREK"><img src="https://img.shields.io/github/stars/mauriceboe/TREK" alt="GitHub Stars" /></a>
+  <a href="https://github.com/mauriceboe/TREK/commits"><img src="https://img.shields.io/github/last-commit/mauriceboe/TREK" alt="Last Commit" /></a>
 </p>
 
 <p align="center">
   A self-hosted, real-time collaborative travel planner with interactive maps, budgets, packing lists, and more.
   <br />
-  <strong><a href="https://demo-nomad.pakulat.org">Live Demo</a></strong> — Try NOMAD without installing. Resets hourly.
+  <strong><a href="https://demo-nomad.pakulat.org">Live Demo</a></strong> — Try TREK without installing. Resets hourly.
 </p>
 
-![NOMAD Screenshot](docs/screenshot.png)
-![NOMAD Screenshot 2](docs/screenshot-2.png)
+![TREK Screenshot](docs/screenshot.png)
+![TREK Screenshot 2](docs/screenshot-2.png)
 
 <details>
 <summary>More Screenshots</summary>
@@ -44,13 +44,16 @@
 - **Day Notes** — Add timestamped, icon-tagged notes to individual days with drag & drop reordering
 - **Route Optimization** — Auto-optimize place order and export to Google Maps
 - **Weather Forecasts** — 16-day forecasts via Open-Meteo (no API key needed) with historical climate averages as fallback
+- **Map Category Filter** — Filter places by category and see only matching pins on the map
 
 ### Travel Management
-- **Reservations & Bookings** — Track flights, hotels, restaurants with status, confirmation numbers, and file attachments
+- **Reservations & Bookings** — Track flights, accommodations, restaurants with status, confirmation numbers, and file attachments
 - **Budget Tracking** — Category-based expenses with pie chart, per-person/per-day splitting, and multi-currency support
-- **Packing Lists** — Categorized checklists with progress tracking, color coding, and smart suggestions
+- **Packing Lists** — Category-based checklists with user assignment, packing templates, and progress tracking
+- **Packing Templates** — Create reusable packing templates in the admin panel with categories and items, apply to any trip
+- **Bag Tracking** — Optional weight tracking and bag assignment for packing items with iOS-style weight distribution (admin-toggleable)
 - **Document Manager** — Attach documents, tickets, and PDFs to trips, places, or reservations (up to 50 MB per file)
-- **PDF Export** — Export complete trip plans as PDF with cover page, images, notes, and NOMAD branding
+- **PDF Export** — Export complete trip plans as PDF with cover page, images, notes, and TREK branding
 
 ### Mobile & PWA
 - **Progressive Web App** — Install on iOS and Android directly from the browser, no App Store needed
@@ -61,19 +64,22 @@
 ### Collaboration
 - **Real-Time Sync** — Plan together via WebSocket — changes appear instantly across all connected users
 - **Multi-User** — Invite members to collaborate on shared trips with role-based access
+- **Invite Links** — Create one-time registration links with configurable max uses and expiry for easy onboarding
 - **Single Sign-On (OIDC)** — Login with Google, Apple, Authentik, Keycloak, or any OIDC provider
+- **Two-Factor Authentication (MFA)** — TOTP-based 2FA with QR code setup, works with Google Authenticator, Authy, etc.
 - **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
 
 ### Addons (modular, admin-toggleable)
 - **Vacay** — Personal vacation day planner with calendar view, public holidays (100+ countries), company holidays, user fusion with live sync, and carry-over tracking
-- **Atlas** — Interactive world map with visited countries, travel stats, continent breakdown, streak tracking, and liquid glass UI effects
+- **Atlas** — Interactive world map with visited countries, bucket list with planned travel dates, travel stats, continent breakdown, streak tracking, and liquid glass UI effects
 - **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
 - **Dashboard Widgets** — Currency converter and timezone clock, toggleable per user
 
 ### Customization & Admin
+- **Dashboard Views** — Toggle between card grid and compact list view on the My Trips page
 - **Dark Mode** — Full light and dark theme with dynamic status bar color matching
-- **Multilingual** — English and German (i18n)
-- **Admin Panel** — User management, global categories, addon management, API keys, backups, and GitHub release history
+- **Multilingual** — English, German, Spanish, French, Russian, Chinese (Simplified), Dutch, Arabic (with RTL support)
+- **Admin Panel** — User management, invite links, packing templates, global categories, addon management, API keys, backups, and GitHub release history
 - **Auto-Backups** — Scheduled backups with configurable interval and retention
 - **Customizable** — Temperature units, time format (12h/24h), map tile sources, default coordinates
 
@@ -84,7 +90,7 @@
 - **PWA**: vite-plugin-pwa + Workbox
 - **Real-Time**: WebSocket (`ws`)
 - **State**: Zustand
-- **Auth**: JWT + OIDC
+- **Auth**: JWT + OIDC + TOTP (MFA)
 - **Maps**: Leaflet + react-leaflet-cluster + Google Places API (optional)
 - **Weather**: Open-Meteo API (free, no key required)
 - **Icons**: lucide-react
@@ -92,19 +98,21 @@
 ## Quick Start
 
 ```bash
-docker run -d -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/nomad
+ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
+  -e ENCRYPTION_KEY=$ENCRYPTION_KEY \
+  -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/trek
 ```
 
 The app runs on port `3000`. The first user to register becomes the admin.
 
 ### Install as App (PWA)
 
-NOMAD works as a Progressive Web App — no App Store needed:
+TREK works as a Progressive Web App — no App Store needed:
 
-1. Open your NOMAD instance in the browser (HTTPS required)
+1. Open your TREK instance in the browser (HTTPS required)
 2. **iOS**: Share button → "Add to Home Screen"
 3. **Android**: Menu → "Install app" or "Add to Home Screen"
-4. NOMAD launches fullscreen with its own icon, just like a native app
+4. TREK launches fullscreen with its own icon, just like a native app
 
 <details>
 <summary>Docker Compose (recommended for production)</summary>
@@ -112,17 +120,39 @@ NOMAD works as a Progressive Web App — no App Store needed:
 ```yaml
 services:
   app:
-    image: mauriceboe/nomad:latest
-    container_name: nomad
+    image: mauriceboe/trek:latest
+    container_name: trek
+    read_only: true
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+    cap_add:
+      - CHOWN
+      - SETUID
+      - SETGID
+    tmpfs:
+      - /tmp:noexec,nosuid,size=64m
     ports:
       - "3000:3000"
     environment:
       - NODE_ENV=production
       - PORT=3000
+      - ENCRYPTION_KEY=${ENCRYPTION_KEY:-} # Recommended. Generate with: openssl rand -hex 32. If unset, falls back to data/.jwt_secret (existing installs) or auto-generates a key (fresh installs).
+      - ALLOWED_ORIGINS=${ALLOWED_ORIGINS:-} # Comma-separated origins for CORS and email notification links
+      - TZ=${TZ:-UTC} # Timezone for logs, reminders and scheduled tasks (e.g. Europe/Berlin)
+      - LOG_LEVEL=${LOG_LEVEL:-info} # info = concise user actions; debug = verbose admin-level details
+      # - ALLOW_INTERNAL_NETWORK=true # Uncomment if Immich is on your local network (RFC-1918 IPs)
     volumes:
       - ./data:/app/data
       - ./uploads:/app/uploads
     restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:3000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 15s
 ```
 
 ```bash
@@ -142,20 +172,32 @@ docker compose pull && docker compose up -d
 **Docker Run** — use the same volume paths from your original `docker run` command:
 
 ```bash
-docker pull mauriceboe/nomad
-docker rm -f nomad
-docker run -d --name nomad -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/nomad
+docker pull mauriceboe/trek
+docker rm -f trek
+docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/trek
 ```
 
-> **Tip:** Not sure which paths you used? Run `docker inspect nomad --format '{{json .Mounts}}'` before removing the container.
+> **Tip:** Not sure which paths you used? Run `docker inspect trek --format '{{json .Mounts}}'` before removing the container.
 
 Your data is persisted in the mounted `data` and `uploads` volumes — updates never touch your existing data.
 
+### Rotating the Encryption Key
+
+If you need to rotate `ENCRYPTION_KEY` (e.g. you are upgrading from a version that derived encryption from `JWT_SECRET`), use the migration script to re-encrypt all stored secrets under the new key without starting the app:
+
+```bash
+docker exec -it trek node --import tsx scripts/migrate-encryption.ts
+```
+
+The script will prompt for your old and new keys interactively (input is not echoed). It creates a timestamped database backup before making any changes and exits with a non-zero code if anything fails.
+
+**Upgrading from a previous version?** Your old JWT secret is in `./data/.jwt_secret`. Use its contents as the "old key" and your new `ENCRYPTION_KEY` value as the "new key".
+
 ### Reverse Proxy (recommended)
 
-For production, put NOMAD behind a reverse proxy with HTTPS (e.g. Nginx, Caddy, Traefik).
+For production, put TREK behind a reverse proxy with HTTPS (e.g. Nginx, Caddy, Traefik).
 
-> **Important:** NOMAD uses WebSockets for real-time sync. Your reverse proxy must support WebSocket upgrades on the `/ws` path.
+> **Important:** TREK uses WebSockets for real-time sync. Your reverse proxy must support WebSocket upgrades on the `/ws` path.
 
 <details>
 <summary>Nginx</summary>
@@ -163,13 +205,13 @@ For production, put NOMAD behind a reverse proxy with HTTPS (e.g. Nginx, Caddy,
 ```nginx
 server {
     listen 80;
-    server_name nomad.yourdomain.com;
+    server_name trek.yourdomain.com;
     return 301 https://$host$request_uri;
 }
 
 server {
     listen 443 ssl http2;
-    server_name nomad.yourdomain.com;
+    server_name trek.yourdomain.com;
 
     ssl_certificate /path/to/fullchain.pem;
     ssl_certificate_key /path/to/privkey.pem;
@@ -204,13 +246,36 @@ server {
 Caddy handles WebSocket upgrades automatically:
 
 ```
-nomad.yourdomain.com {
+trek.yourdomain.com {
     reverse_proxy localhost:3000
 }
 ```
 
 </details>
 
+## Environment Variables
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| **Core** | | |
+| `PORT` | Server port | `3000` |
+| `NODE_ENV` | Environment (`production` / `development`) | `production` |
+| `ENCRYPTION_KEY` | At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC). Recommended: generate with `openssl rand -hex 32`. If unset, falls back to `data/.jwt_secret` (existing installs) or auto-generates a key (fresh installs). | Auto |
+| `TZ` | Timezone for logs, reminders and cron jobs (e.g. `Europe/Berlin`) | `UTC` |
+| `LOG_LEVEL` | `info` = concise user actions, `debug` = verbose details | `info` |
+| `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
+| `FORCE_HTTPS` | Redirect HTTP to HTTPS behind a TLS-terminating proxy | `false` |
+| `TRUST_PROXY` | Number of trusted reverse proxies for `X-Forwarded-For` | `1` |
+| `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IP addresses. Set to `true` if Immich or other integrated services are hosted on your local network. Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) are always blocked regardless of this setting. | `false` |
+| **OIDC / SSO** | | |
+| `OIDC_ISSUER` | OpenID Connect provider URL | — |
+| `OIDC_CLIENT_ID` | OIDC client ID | — |
+| `OIDC_CLIENT_SECRET` | OIDC client secret | — |
+| `OIDC_DISPLAY_NAME` | Label shown on the SSO login button | `SSO` |
+| `OIDC_ONLY` | Disable local password auth entirely (first SSO login becomes admin) | `false` |
+| **Other** | | |
+| `DEMO_MODE` | Enable demo mode (hourly data resets) | `false` |
+
 ## Optional API Keys
 
 API keys are configured in the **Admin Panel** after login. Keys set by the admin are automatically shared with all users — no per-user configuration needed.
@@ -220,20 +285,21 @@ API keys are configured in the **Admin Panel** after login. Keys set by the admi
 1. Go to [Google Cloud Console](https://console.cloud.google.com/)
 2. Create a project and enable the **Places API (New)**
 3. Create an API key under Credentials
-4. In NOMAD: Admin Panel → Settings → Google Maps
+4. In TREK: Admin Panel → Settings → Google Maps
 
 ## Building from Source
 
 ```bash
-git clone https://github.com/mauriceboe/NOMAD.git
-cd NOMAD
-docker build -t nomad .
+git clone https://github.com/mauriceboe/TREK.git
+cd TREK
+docker build -t trek .
 ```
 
 ## Data & Backups
 
 - **Database**: SQLite, stored in `./data/travel.db`
 - **Uploads**: Stored in `./uploads/`
+- **Logs**: `./data/logs/trek.log` (auto-rotated)
 - **Backups**: Create and restore via Admin Panel
 - **Auto-Backups**: Configurable schedule and retention in Admin Panel
 

SECURITY.md

@@ -21,6 +21,6 @@ You will receive a response within 48 hours. Once confirmed, a fix will be relea
 
 ## Scope
 
-This policy covers the NOMAD application and its Docker image (`mauriceboe/nomad`).
+This policy covers the TREK application and its Docker image (`mauriceboe/trek`).
 
 Third-party dependencies are monitored via GitHub Dependabot.

chart/Chart.yaml

@@ -0,0 +1,5 @@
+apiVersion: v2
+name: trek
+version: 0.1.0
+description: Minimal Helm chart for TREK app
+appVersion: "latest"

chart/README.md

@@ -0,0 +1,34 @@
+# TREK Helm Chart
+
+This is a minimal Helm chart for deploying the TREK app.
+
+## Features
+- Deploys the TREK container
+- Exposes port 3000 via Service
+- Optional persistent storage for `/app/data` and `/app/uploads`
+- Configurable environment variables and secrets
+- Optional generic Ingress support
+- Health checks on `/api/health`
+
+## Usage
+
+```sh
+helm install trek ./chart \
+  --set ingress.enabled=true \
+  --set ingress.hosts[0].host=yourdomain.com
+```
+
+See `values.yaml` for more options.
+
+## Files
+- `Chart.yaml` — chart metadata
+- `values.yaml` — configuration values
+- `templates/` — Kubernetes manifests
+
+## Notes
+- Ingress is off by default. Enable and configure hosts for your domain.
+- PVCs require a default StorageClass or specify one as needed.
+- `JWT_SECRET` is managed entirely by the server — auto-generated into the data PVC on first start and rotatable via the admin panel (Settings → Danger Zone). No Helm configuration needed.
+- `ENCRYPTION_KEY` encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest. Recommended: set via `secretEnv.ENCRYPTION_KEY` or `existingSecret`. If left empty, the server falls back automatically: existing installs use `data/.jwt_secret` (no action needed on upgrade); fresh installs auto-generate a key persisted to the data PVC.
+- If using ingress, you must manually keep `env.ALLOWED_ORIGINS` and `ingress.hosts` in sync to ensure CORS works correctly. The chart does not sync these automatically.
+- Set `env.ALLOW_INTERNAL_NETWORK: "true"` if Immich or other integrated services are hosted on a private/RFC-1918 address (e.g. a pod on the same cluster or a NAS on your LAN). Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) remain blocked regardless.

chart/templates/NOTES.txt

@@ -0,0 +1,23 @@
+1. ENCRYPTION_KEY handling:
+   - ENCRYPTION_KEY encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest.
+   - By default, the chart creates a Kubernetes Secret from `secretEnv.ENCRYPTION_KEY` in values.yaml.
+   - To generate a random key at install (preserved across upgrades), set `generateEncryptionKey: true`.
+   - To use an existing Kubernetes secret, set `existingSecret` to the secret name. The secret must
+     contain a key matching `existingSecretKey` (defaults to `ENCRYPTION_KEY`).
+   - If left empty, the server resolves the key automatically: existing installs fall back to
+     data/.jwt_secret (encrypted data stays readable with no manual action); fresh installs
+     auto-generate a key persisted to the data PVC.
+
+2. JWT_SECRET is managed entirely by the server:
+   - Auto-generated on first start and persisted to the data PVC (data/.jwt_secret).
+   - Rotate it via the admin panel (Settings → Danger Zone → Rotate JWT Secret).
+   - No Helm configuration needed or supported.
+
+3. Example usage:
+   - Set an explicit encryption key: `--set secretEnv.ENCRYPTION_KEY=your_enc_key`
+   - Generate a random key at install: `--set generateEncryptionKey=true`
+   - Use an existing secret: `--set existingSecret=my-k8s-secret`
+   - Use a custom key name in the existing secret: `--set existingSecret=my-k8s-secret --set existingSecretKey=MY_ENC_KEY`
+
+4. Only one method should be used at a time. If both `generateEncryptionKey` and `existingSecret` are
+   set, `existingSecret` takes precedence. Ensure the referenced secret and key exist in the namespace.

chart/templates/_helpers.tpl

@@ -0,0 +1,18 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "trek.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" -}}
+{{- end -}}
+
+{{/*
+Create a default fully qualified app name.
+*/}}
+{{- define "trek.fullname" -}}
+{{- if .Values.fullnameOverride -}}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" -}}
+{{- else -}}
+{{- $name := default .Chart.Name .Values.nameOverride -}}
+{{- printf "%s" $name | trunc 63 | trimSuffix "-" -}}
+{{- end -}}
+{{- end -}}

chart/templates/configmap.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: {{ include "trek.fullname" . }}-config
+  labels:
+    app: {{ include "trek.name" . }}
+data:
+  NODE_ENV: {{ .Values.env.NODE_ENV | quote }}
+  PORT: {{ .Values.env.PORT | quote }}
+  {{- if .Values.env.ALLOWED_ORIGINS }}
+  ALLOWED_ORIGINS: {{ .Values.env.ALLOWED_ORIGINS | quote }}
+  {{- end }}
+  {{- if .Values.env.ALLOW_INTERNAL_NETWORK }}
+  ALLOW_INTERNAL_NETWORK: {{ .Values.env.ALLOW_INTERNAL_NETWORK | quote }}
+  {{- end }}

chart/templates/deployment.yaml

@@ -0,0 +1,68 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "trek.fullname" . }}
+  labels:
+    app: {{ include "trek.name" . }}
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: {{ include "trek.name" . }}
+  template:
+    metadata:
+      labels:
+        app: {{ include "trek.name" . }}
+    spec:
+      {{- if .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- range .Values.imagePullSecrets }}
+        - name: {{ .name }}
+        {{- end }}
+      {{- end }}
+      securityContext:
+        fsGroup: 1000
+      containers:
+        - name: trek
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          {{- with .Values.resources }}
+          resources:
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
+          ports:
+            - containerPort: 3000
+          envFrom:
+            - configMapRef:
+                name: {{ include "trek.fullname" . }}-config
+          env:
+            - name: ENCRYPTION_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
+                  key: {{ .Values.existingSecretKey | default "ENCRYPTION_KEY" }}
+                  optional: true
+          volumeMounts:
+            - name: data
+              mountPath: /app/data
+            - name: uploads
+              mountPath: /app/uploads
+          livenessProbe:
+            httpGet:
+              path: /api/health
+              port: 3000
+            initialDelaySeconds: 15
+            periodSeconds: 30
+          readinessProbe:
+            httpGet:
+              path: /api/health
+              port: 3000
+            initialDelaySeconds: 5
+            periodSeconds: 10
+      volumes:
+        - name: data
+          persistentVolumeClaim:
+            claimName: {{ include "trek.fullname" . }}-data
+        - name: uploads
+          persistentVolumeClaim:
+            claimName: {{ include "trek.fullname" . }}-uploads

chart/templates/ingress.yaml

@@ -0,0 +1,32 @@
+{{- if .Values.ingress.enabled }}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: {{ include "trek.fullname" . }}
+  labels:
+    app: {{ include "trek.name" . }}
+  {{- with .Values.ingress.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  {{- if .Values.ingress.tls }}
+  tls:
+    {{- toYaml .Values.ingress.tls | nindent 4 }}
+  {{- end }}
+  rules:
+    {{- range .Values.ingress.hosts }}
+    - host: {{ .host }}
+      http:
+        paths:
+          {{- range .paths }}
+          - path: {{ . }}
+            pathType: Prefix
+            backend:
+              service:
+                name: {{ include "trek.fullname" $ }}
+                port:
+                  number: {{ $.Values.service.port }}
+          {{- end }}
+    {{- end }}
+{{- end }}

chart/templates/pvc.yaml

@@ -0,0 +1,27 @@
+{{- if .Values.persistence.enabled }}
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: {{ include "trek.fullname" . }}-data
+  labels:
+    app: {{ include "trek.name" . }}
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: {{ .Values.persistence.data.size }}
+---
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: {{ include "trek.fullname" . }}-uploads
+  labels:
+    app: {{ include "trek.name" . }}
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: {{ .Values.persistence.uploads.size }}
+{{- end }}

chart/templates/secret.yaml

@@ -0,0 +1,29 @@
+{{- if and (not .Values.existingSecret) (not .Values.generateEncryptionKey) }}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: {{ include "trek.fullname" . }}-secret
+  labels:
+    app: {{ include "trek.name" . }}
+type: Opaque
+data:
+  {{ .Values.existingSecretKey | default "ENCRYPTION_KEY" }}: {{ .Values.secretEnv.ENCRYPTION_KEY | b64enc | quote }}
+{{- end }}
+
+{{- if and (not .Values.existingSecret) (.Values.generateEncryptionKey) }}
+{{- $secretName := printf "%s-secret" (include "trek.fullname" .) }}
+{{- $existingSecret := (lookup "v1" "Secret" .Release.Namespace $secretName) }}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: {{ $secretName }}
+  labels:
+    app: {{ include "trek.name" . }}
+type: Opaque
+stringData:
+  {{- if and $existingSecret $existingSecret.data }}
+  {{ .Values.existingSecretKey | default "ENCRYPTION_KEY" }}: {{ index $existingSecret.data (.Values.existingSecretKey | default "ENCRYPTION_KEY") | b64dec }}
+  {{- else }}
+  {{ .Values.existingSecretKey | default "ENCRYPTION_KEY" }}: {{ randAlphaNum 32 }}
+  {{- end }}
+{{- end }}

chart/templates/service.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "trek.fullname" . }}
+  labels:
+    app: {{ include "trek.name" . }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: 3000
+      protocol: TCP
+      name: http
+  selector:
+    app: {{ include "trek.name" . }}

chart/values.yaml

@@ -0,0 +1,68 @@
+
+image:
+  repository: mauriceboe/trek
+  tag: latest
+  pullPolicy: IfNotPresent
+
+# Optional image pull secrets for private registries
+imagePullSecrets: []
+  # - name: my-registry-secret
+
+service:
+  type: ClusterIP
+  port: 3000
+
+env:
+  NODE_ENV: production
+  PORT: 3000
+  # ALLOWED_ORIGINS: ""
+  # NOTE: If using ingress, ensure env.ALLOWED_ORIGINS matches the domains in ingress.hosts for proper CORS configuration.
+  # ALLOW_INTERNAL_NETWORK: "false"
+  # Set to "true" if Immich or other integrated services are hosted on a private/RFC-1918 network address.
+  # Loopback (127.x) and link-local/metadata addresses (169.254.x) are always blocked.
+
+
+# Secret environment variables stored in a Kubernetes Secret.
+# JWT_SECRET is managed entirely by the server (auto-generated into the data PVC,
+# rotatable via the admin panel) — it is not configured here.
+secretEnv:
+  # At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC, etc.).
+  # Recommended: set to a random 32-byte hex value (openssl rand -hex 32).
+  # If left empty the server resolves the key automatically:
+  #   1. data/.jwt_secret (existing installs — encrypted data stays readable after upgrade)
+  #   2. data/.encryption_key auto-generated on first start (fresh installs)
+  ENCRYPTION_KEY: ""
+
+# If true, a random ENCRYPTION_KEY is generated at install and preserved across upgrades
+generateEncryptionKey: false
+
+# If set, use an existing Kubernetes secret that contains ENCRYPTION_KEY
+existingSecret: ""
+existingSecretKey: ENCRYPTION_KEY
+
+persistence:
+  enabled: true
+  data:
+    size: 1Gi
+  uploads:
+    size: 1Gi
+
+resources:
+  requests:
+    cpu: 100m
+    memory: 256Mi
+  limits:
+    cpu: 500m
+    memory: 512Mi
+
+ingress:
+  enabled: false
+  annotations: {}
+  hosts:
+    - host: chart-example.local
+      paths:
+        - /
+  tls: []
+  #  - secretName: chart-example-tls
+  #    hosts:
+  #      - chart-example.local

client/index.html

@@ -21,7 +21,9 @@
     <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
 
     <!-- Leaflet -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+          crossorigin="" />
   </head>
   <body>
     <div id="root"></div>

client/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trek-client",
-  "version": "2.6.1",
+  "version": "2.7.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "trek-client",
-      "version": "2.6.1",
+      "version": "2.7.2",
       "dependencies": {
         "@react-pdf/renderer": "^4.3.2",
         "axios": "^1.6.7",
@@ -2789,9 +2789,9 @@
       }
     },
     "node_modules/@rollup/pluginutils/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3693,9 +3693,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
-      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4679,9 +4679,9 @@
       "license": "MIT"
     },
     "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.3.tgz",
+      "integrity": "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7181,9 +7181,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8705,9 +8705,9 @@
       }
     },
     "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trek-client",
-  "version": "2.6.2",
+  "version": "2.7.2",
   "private": true,
   "type": "module",
   "scripts": {

client/src/App.tsx

@@ -3,7 +3,6 @@ import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from './store/authStore'
 import { useSettingsStore } from './store/settingsStore'
 import LoginPage from './pages/LoginPage'
-import RegisterPage from './pages/RegisterPage'
 import DashboardPage from './pages/DashboardPage'
 import TripPlannerPage from './pages/TripPlannerPage'
 import FilesPage from './pages/FilesPage'
@@ -11,10 +10,11 @@ import AdminPage from './pages/AdminPage'
 import SettingsPage from './pages/SettingsPage'
 import VacayPage from './pages/VacayPage'
 import AtlasPage from './pages/AtlasPage'
+import SharedTripPage from './pages/SharedTripPage'
 import { ToastContainer } from './components/shared/Toast'
 import { TranslationProvider, useTranslation } from './i18n'
-import DemoBanner from './components/Layout/DemoBanner'
 import { authApi } from './api/client'
+import { usePermissionsStore, PermissionLevel } from './store/permissionsStore'
 
 interface ProtectedRouteProps {
   children: ReactNode
@@ -22,8 +22,12 @@ interface ProtectedRouteProps {
 }
 
 function ProtectedRoute({ children, adminRequired = false }: ProtectedRouteProps) {
-  const { isAuthenticated, user, isLoading } = useAuthStore()
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+  const user = useAuthStore((s) => s.user)
+  const isLoading = useAuthStore((s) => s.isLoading)
+  const appRequireMfa = useAuthStore((s) => s.appRequireMfa)
   const { t } = useTranslation()
+  const location = useLocation()
 
   if (isLoading) {
     return (
@@ -40,6 +44,15 @@ function ProtectedRoute({ children, adminRequired = false }: ProtectedRouteProps
     return <Navigate to="/login" replace />
   }
 
+  if (
+    appRequireMfa &&
+    user &&
+    !user.mfa_enabled &&
+    location.pathname !== '/settings'
+  ) {
+    return <Navigate to="/settings?mfa=required" replace />
+  }
+
   if (adminRequired && user && user.role !== 'admin') {
     return <Navigate to="/dashboard" replace />
   }
@@ -62,16 +75,38 @@ function RootRedirect() {
 }
 
 export default function App() {
-  const { loadUser, token, isAuthenticated, demoMode, setDemoMode, setHasMapsKey } = useAuthStore()
+  const { loadUser, isAuthenticated, demoMode, setDemoMode, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled } = useAuthStore()
   const { loadSettings } = useSettingsStore()
 
   useEffect(() => {
-    if (token) {
-      loadUser()
-    }
-    authApi.getAppConfig().then((config: { demo_mode?: boolean; has_maps_key?: boolean }) => {
+    loadUser()
+    authApi.getAppConfig().then(async (config: { demo_mode?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
       if (config?.demo_mode) setDemoMode(true)
       if (config?.has_maps_key !== undefined) setHasMapsKey(config.has_maps_key)
+      if (config?.timezone) setServerTimezone(config.timezone)
+      if (config?.require_mfa !== undefined) setAppRequireMfa(!!config.require_mfa)
+      if (config?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(config.trip_reminders_enabled)
+      if (config?.permissions) usePermissionsStore.getState().setPermissions(config.permissions)
+
+      if (config?.version) {
+        const storedVersion = localStorage.getItem('trek_app_version')
+        if (storedVersion && storedVersion !== config.version) {
+          try {
+            if ('caches' in window) {
+              const names = await caches.keys()
+              await Promise.all(names.map(n => caches.delete(n)))
+            }
+            if ('serviceWorker' in navigator) {
+              const regs = await navigator.serviceWorker.getRegistrations()
+              await Promise.all(regs.map(r => r.unregister()))
+            }
+          } catch {}
+          localStorage.setItem('trek_app_version', config.version)
+          window.location.reload()
+          return
+        }
+        localStorage.setItem('trek_app_version', config.version)
+      }
     }).catch(() => {})
   }, [])
 
@@ -83,7 +118,18 @@ export default function App() {
     }
   }, [isAuthenticated])
 
+  const location = useLocation()
+  const isSharedPage = location.pathname.startsWith('/shared/')
+
   useEffect(() => {
+    // Shared page always forces light mode
+    if (isSharedPage) {
+      document.documentElement.classList.remove('dark')
+      const meta = document.querySelector('meta[name="theme-color"]')
+      if (meta) meta.setAttribute('content', '#ffffff')
+      return
+    }
+
     const mode = settings.dark_mode
     const applyDark = (isDark: boolean) => {
       document.documentElement.classList.toggle('dark', isDark)
@@ -99,7 +145,7 @@ export default function App() {
       return () => mq.removeEventListener('change', handler)
     }
     applyDark(mode === true || mode === 'dark')
-  }, [settings.dark_mode])
+  }, [settings.dark_mode, isSharedPage])
 
   return (
     <TranslationProvider>
@@ -107,7 +153,8 @@ export default function App() {
       <Routes>
         <Route path="/" element={<RootRedirect />} />
         <Route path="/login" element={<LoginPage />} />
-        <Route path="/register" element={<Navigate to="/login" replace />} />
+        <Route path="/shared/:token" element={<SharedTripPage />} />
+        <Route path="/register" element={<LoginPage />} />
         <Route
           path="/dashboard"
           element={

client/src/api/authUrl.ts

@@ -0,0 +1,16 @@
+export async function getAuthUrl(url: string, purpose: 'download' | 'immich'): Promise<string> {
+  if (!url) return url
+  try {
+    const resp = await fetch('/api/auth/resource-token', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ purpose }),
+    })
+    if (!resp.ok) return url
+    const { token } = await resp.json()
+    return `${url}${url.includes('?') ? '&' : '?'}token=${token}`
+  } catch {
+    return url
+  }
+}

client/src/api/client.ts

@@ -3,18 +3,15 @@ import { getSocketId } from './websocket'
 
 const apiClient: AxiosInstance = axios.create({
   baseURL: '/api',
+  withCredentials: true,
   headers: {
     'Content-Type': 'application/json',
   },
 })
 
-// Request interceptor - add auth token and socket ID
+// Request interceptor - add socket ID
 apiClient.interceptors.request.use(
   (config) => {
-    const token = localStorage.getItem('auth_token')
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`
-    }
     const sid = getSocketId()
     if (sid) {
       config.headers['X-Socket-Id'] = sid
@@ -29,18 +26,29 @@ apiClient.interceptors.response.use(
   (response) => response,
   (error) => {
     if (error.response?.status === 401) {
-      localStorage.removeItem('auth_token')
       if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register')) {
         window.location.href = '/login'
       }
     }
+    if (
+      error.response?.status === 403 &&
+      (error.response?.data as { code?: string } | undefined)?.code === 'MFA_REQUIRED' &&
+      !window.location.pathname.startsWith('/settings')
+    ) {
+      window.location.href = '/settings?mfa=required'
+    }
     return Promise.reject(error)
   }
 )
 
 export const authApi = {
-  register: (data: { username: string; email: string; password: string }) => apiClient.post('/auth/register', data).then(r => r.data),
+  register: (data: { username: string; email: string; password: string; invite_token?: string }) => apiClient.post('/auth/register', data).then(r => r.data),
+  validateInvite: (token: string) => apiClient.get(`/auth/invite/${token}`).then(r => r.data),
   login: (data: { email: string; password: string }) => apiClient.post('/auth/login', data).then(r => r.data),
+  verifyMfaLogin: (data: { mfa_token: string; code: string }) => apiClient.post('/auth/mfa/verify-login', data).then(r => r.data),
+  mfaSetup: () => apiClient.post('/auth/mfa/setup', {}).then(r => r.data),
+  mfaEnable: (data: { code: string }) => apiClient.post('/auth/mfa/enable', data).then(r => r.data as { success: boolean; mfa_enabled: boolean; backup_codes?: string[] }),
+  mfaDisable: (data: { password: string; code: string }) => apiClient.post('/auth/mfa/disable', data).then(r => r.data),
   me: () => apiClient.get('/auth/me').then(r => r.data),
   updateMapsKey: (key: string | null) => apiClient.put('/auth/me/maps-key', { maps_api_key: key }).then(r => r.data),
   updateApiKeys: (data: Record<string, string | null>) => apiClient.put('/auth/me/api-keys', data).then(r => r.data),
@@ -56,6 +64,11 @@ export const authApi = {
   changePassword: (data: { current_password: string; new_password: string }) => apiClient.put('/auth/me/password', data).then(r => r.data),
   deleteOwnAccount: () => apiClient.delete('/auth/me').then(r => r.data),
   demoLogin: () => apiClient.post('/auth/demo-login').then(r => r.data),
+  mcpTokens: {
+    list: () => apiClient.get('/auth/mcp-tokens').then(r => r.data),
+    create: (name: string) => apiClient.post('/auth/mcp-tokens', { name }).then(r => r.data),
+    delete: (id: number) => apiClient.delete(`/auth/mcp-tokens/${id}`).then(r => r.data),
+  },
 }
 
 export const tripsApi = {
@@ -86,6 +99,12 @@ export const placesApi = {
   update: (tripId: number | string, id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number | string) => apiClient.delete(`/trips/${tripId}/places/${id}`).then(r => r.data),
   searchImage: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}/image`).then(r => r.data),
+  importGpx: (tripId: number | string, file: File) => {
+    const fd = new FormData(); fd.append('file', file)
+    return apiClient.post(`/trips/${tripId}/places/import/gpx`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+  },
+  importGoogleList: (tripId: number | string, url: string) =>
+    apiClient.post(`/trips/${tripId}/places/import/google-list`, { url }).then(r => r.data),
 }
 
 export const assignmentsApi = {
@@ -103,9 +122,17 @@ export const assignmentsApi = {
 export const packingApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing`).then(r => r.data),
   create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/packing`, data).then(r => r.data),
+  bulkImport: (tripId: number | string, items: { name: string; category?: string; quantity?: number }[]) => apiClient.post(`/trips/${tripId}/packing/import`, { items }).then(r => r.data),
   update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/packing/${id}`).then(r => r.data),
   reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds }).then(r => r.data),
+  getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
+  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
+  applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
+  listBags: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/bags`).then(r => r.data),
+  createBag: (tripId: number | string, data: { name: string; color?: string }) => apiClient.post(`/trips/${tripId}/packing/bags`, data).then(r => r.data),
+  updateBag: (tripId: number | string, bagId: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}`, data).then(r => r.data),
+  deleteBag: (tripId: number | string, bagId: number) => apiClient.delete(`/trips/${tripId}/packing/bags/${bagId}`).then(r => r.data),
 }
 
 export const tagsApi = {
@@ -134,7 +161,29 @@ export const adminApi = {
   addons: () => apiClient.get('/admin/addons').then(r => r.data),
   updateAddon: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/admin/addons/${id}`, data).then(r => r.data),
   checkVersion: () => apiClient.get('/admin/version-check').then(r => r.data),
-  installUpdate: () => apiClient.post('/admin/update', {}, { timeout: 300000 }).then(r => r.data),
+  getBagTracking: () => apiClient.get('/admin/bag-tracking').then(r => r.data),
+  updateBagTracking: (enabled: boolean) => apiClient.put('/admin/bag-tracking', { enabled }).then(r => r.data),
+  packingTemplates: () => apiClient.get('/admin/packing-templates').then(r => r.data),
+  getPackingTemplate: (id: number) => apiClient.get(`/admin/packing-templates/${id}`).then(r => r.data),
+  createPackingTemplate: (data: { name: string }) => apiClient.post('/admin/packing-templates', data).then(r => r.data),
+  updatePackingTemplate: (id: number, data: { name: string }) => apiClient.put(`/admin/packing-templates/${id}`, data).then(r => r.data),
+  deletePackingTemplate: (id: number) => apiClient.delete(`/admin/packing-templates/${id}`).then(r => r.data),
+  addTemplateCategory: (templateId: number, data: { name: string }) => apiClient.post(`/admin/packing-templates/${templateId}/categories`, data).then(r => r.data),
+  updateTemplateCategory: (templateId: number, catId: number, data: { name: string }) => apiClient.put(`/admin/packing-templates/${templateId}/categories/${catId}`, data).then(r => r.data),
+  deleteTemplateCategory: (templateId: number, catId: number) => apiClient.delete(`/admin/packing-templates/${templateId}/categories/${catId}`).then(r => r.data),
+  addTemplateItem: (templateId: number, catId: number, data: { name: string }) => apiClient.post(`/admin/packing-templates/${templateId}/categories/${catId}/items`, data).then(r => r.data),
+  updateTemplateItem: (templateId: number, itemId: number, data: { name: string }) => apiClient.put(`/admin/packing-templates/${templateId}/items/${itemId}`, data).then(r => r.data),
+  deleteTemplateItem: (templateId: number, itemId: number) => apiClient.delete(`/admin/packing-templates/${templateId}/items/${itemId}`).then(r => r.data),
+  listInvites: () => apiClient.get('/admin/invites').then(r => r.data),
+  createInvite: (data: { max_uses: number; expires_in_days?: number }) => apiClient.post('/admin/invites', data).then(r => r.data),
+  deleteInvite: (id: number) => apiClient.delete(`/admin/invites/${id}`).then(r => r.data),
+  auditLog: (params?: { limit?: number; offset?: number }) =>
+    apiClient.get('/admin/audit-log', { params }).then(r => r.data),
+  mcpTokens: () => apiClient.get('/admin/mcp-tokens').then(r => r.data),
+  deleteMcpToken: (id: number) => apiClient.delete(`/admin/mcp-tokens/${id}`).then(r => r.data),
+  getPermissions: () => apiClient.get('/admin/permissions').then(r => r.data),
+  updatePermissions: (permissions: Record<string, string>) => apiClient.put('/admin/permissions', { permissions }).then(r => r.data),
+  rotateJwtSecret: () => apiClient.post('/admin/rotate-jwt-secret').then(r => r.data),
 }
 
 export const addonsApi = {
@@ -146,6 +195,7 @@ export const mapsApi = {
   details: (placeId: string, lang?: string) => apiClient.get(`/maps/details/${encodeURIComponent(placeId)}`, { params: { lang } }).then(r => r.data),
   placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => r.data),
   reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => r.data),
+  resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => r.data),
 }
 
 export const budgetApi = {
@@ -156,6 +206,7 @@ export const budgetApi = {
   setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds }).then(r => r.data),
   togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
+  settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
 }
 
 export const filesApi = {
@@ -169,6 +220,9 @@ export const filesApi = {
   restore: (tripId: number | string, id: number) => apiClient.post(`/trips/${tripId}/files/${id}/restore`).then(r => r.data),
   permanentDelete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}/permanent`).then(r => r.data),
   emptyTrash: (tripId: number | string) => apiClient.delete(`/trips/${tripId}/files/trash/empty`).then(r => r.data),
+  addLink: (tripId: number | string, fileId: number, data: { reservation_id?: number; assignment_id?: number }) => apiClient.post(`/trips/${tripId}/files/${fileId}/link`, data).then(r => r.data),
+  removeLink: (tripId: number | string, fileId: number, linkId: number) => apiClient.delete(`/trips/${tripId}/files/${fileId}/link/${linkId}`).then(r => r.data),
+  getLinks: (tripId: number | string, fileId: number) => apiClient.get(`/trips/${tripId}/files/${fileId}/links`).then(r => r.data),
 }
 
 export const reservationsApi = {
@@ -176,6 +230,7 @@ export const reservationsApi = {
   create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/reservations`, data).then(r => r.data),
   update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
+  updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[]) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions }).then(r => r.data),
 }
 
 export const weatherApi = {
@@ -226,9 +281,8 @@ export const backupApi = {
   list: () => apiClient.get('/backup/list').then(r => r.data),
   create: () => apiClient.post('/backup/create').then(r => r.data),
   download: async (filename: string): Promise<void> => {
-    const token = localStorage.getItem('auth_token')
     const res = await fetch(`/api/backup/download/${filename}`, {
-      headers: { Authorization: `Bearer ${token}` },
+      credentials: 'include',
     })
     if (!res.ok) throw new Error('Download failed')
     const blob = await res.blob()
@@ -250,4 +304,18 @@ export const backupApi = {
   setAutoSettings: (settings: Record<string, unknown>) => apiClient.put('/backup/auto-settings', settings).then(r => r.data),
 }
 
+export const shareApi = {
+  getLink: (tripId: number | string) => apiClient.get(`/trips/${tripId}/share-link`).then(r => r.data),
+  createLink: (tripId: number | string, perms?: Record<string, boolean>) => apiClient.post(`/trips/${tripId}/share-link`, perms || {}).then(r => r.data),
+  deleteLink: (tripId: number | string) => apiClient.delete(`/trips/${tripId}/share-link`).then(r => r.data),
+  getSharedTrip: (token: string) => apiClient.get(`/shared/${token}`).then(r => r.data),
+}
+
+export const notificationsApi = {
+  getPreferences: () => apiClient.get('/notifications/preferences').then(r => r.data),
+  updatePreferences: (prefs: Record<string, boolean>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
+  testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }).then(r => r.data),
+  testWebhook: () => apiClient.post('/notifications/test-webhook').then(r => r.data),
+}
+
 export default apiClient

client/src/api/websocket.ts

@@ -9,9 +9,10 @@ let reconnectDelay = 1000
 const MAX_RECONNECT_DELAY = 30000
 const listeners = new Set<WebSocketListener>()
 const activeTrips = new Set<string>()
-let currentToken: string | null = null
+let shouldReconnect = false
 let refetchCallback: RefetchCallback | null = null
 let mySocketId: string | null = null
+let connecting = false
 
 export function getSocketId(): string | null {
   return mySocketId
@@ -21,9 +22,28 @@ export function setRefetchCallback(fn: RefetchCallback | null): void {
   refetchCallback = fn
 }
 
-function getWsUrl(token: string): string {
+function getWsUrl(wsToken: string): string {
   const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
-  return `${protocol}://${location.host}/ws?token=${token}`
+  return `${protocol}://${location.host}/ws?token=${wsToken}`
+}
+
+async function fetchWsToken(): Promise<string | null> {
+  try {
+    const resp = await fetch('/api/auth/ws-token', {
+      method: 'POST',
+      credentials: 'include',
+    })
+    if (resp.status === 401) {
+      // Session expired — stop reconnecting
+      shouldReconnect = false
+      return null
+    }
+    if (!resp.ok) return null
+    const { token } = await resp.json()
+    return token as string
+  } catch {
+    return null
+  }
 }
 
 function handleMessage(event: MessageEvent): void {
@@ -45,19 +65,29 @@ function scheduleReconnect(): void {
   if (reconnectTimer) return
   reconnectTimer = setTimeout(() => {
     reconnectTimer = null
-    if (currentToken) {
-      connectInternal(currentToken, true)
+    if (shouldReconnect) {
+      connectInternal(true)
     }
   }, reconnectDelay)
   reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY)
 }
 
-function connectInternal(token: string, _isReconnect = false): void {
+async function connectInternal(_isReconnect = false): Promise<void> {
+  if (connecting) return
   if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
     return
   }
 
-  const url = getWsUrl(token)
+  connecting = true
+  const wsToken = await fetchWsToken()
+  connecting = false
+
+  if (!wsToken) {
+    if (shouldReconnect) scheduleReconnect()
+    return
+  }
+
+  const url = getWsUrl(wsToken)
   socket = new WebSocket(url)
 
   socket.onopen = () => {
@@ -82,7 +112,7 @@ function connectInternal(token: string, _isReconnect = false): void {
 
   socket.onclose = () => {
     socket = null
-    if (currentToken) {
+    if (shouldReconnect) {
       scheduleReconnect()
     }
   }
@@ -92,18 +122,18 @@ function connectInternal(token: string, _isReconnect = false): void {
   }
 }
 
-export function connect(token: string): void {
-  currentToken = token
+export function connect(): void {
+  shouldReconnect = true
   reconnectDelay = 1000
   if (reconnectTimer) {
     clearTimeout(reconnectTimer)
     reconnectTimer = null
   }
-  connectInternal(token, false)
+  connectInternal(false)
 }
 
 export function disconnect(): void {
-  currentToken = null
+  shouldReconnect = false
   if (reconnectTimer) {
     clearTimeout(reconnectTimer)
     reconnectTimer = null

client/src/components/Admin/AddonManager.tsx

@@ -2,11 +2,12 @@ import { useEffect, useState } from 'react'
 import { adminApi } from '../../api/client'
 import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
+import { useAddonStore } from '../../store/addonStore'
 import { useToast } from '../shared/Toast'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase } from 'lucide-react'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2 } from 'lucide-react'
 
 const ICON_MAP = {
-  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase,
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2,
 }
 
 interface Addon {
@@ -27,11 +28,12 @@ function AddonIcon({ name, size = 20 }: AddonIconProps) {
   return <Icon size={size} />
 }
 
-export default function AddonManager() {
+export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }: { bagTrackingEnabled?: boolean; onToggleBagTracking?: () => void }) {
   const { t } = useTranslation()
   const dm = useSettingsStore(s => s.settings.dark_mode)
   const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   const toast = useToast()
+  const refreshGlobalAddons = useAddonStore(s => s.loadAddons)
   const [addons, setAddons] = useState([])
   const [loading, setLoading] = useState(true)
 
@@ -57,7 +59,7 @@ export default function AddonManager() {
     setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
     try {
       await adminApi.updateAddon(addon.id, { enabled: newEnabled })
-      window.dispatchEvent(new Event('addons-changed'))
+      refreshGlobalAddons()
       toast.success(t('admin.addons.toast.updated'))
     } catch (err: unknown) {
       // Rollback
@@ -68,6 +70,7 @@ export default function AddonManager() {
 
   const tripAddons = addons.filter(a => a.type === 'trip')
   const globalAddons = addons.filter(a => a.type === 'global')
+  const integrationAddons = addons.filter(a => a.type === 'integration')
 
   if (loading) {
     return (
@@ -104,7 +107,28 @@ export default function AddonManager() {
                   </span>
                 </div>
                 {tripAddons.map(addon => (
-                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                  <div key={addon.id}>
+                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
+                    {addon.id === 'packing' && addon.enabled && onToggleBagTracking && (
+                      <div className="flex items-center gap-4 px-6 py-3 border-b" style={{ borderColor: 'var(--border-secondary)', background: 'var(--bg-secondary)', paddingLeft: 70 }}>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('admin.bagTracking.title')}</div>
+                          <div className="text-xs mt-0.5" style={{ color: 'var(--text-faint)' }}>{t('admin.bagTracking.subtitle')}</div>
+                        </div>
+                        <div className="flex items-center gap-2 shrink-0">
+                          <span className="hidden sm:inline text-xs font-medium" style={{ color: bagTrackingEnabled ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+                            {bagTrackingEnabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+                          </span>
+                          <button onClick={onToggleBagTracking}
+                            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                            style={{ background: bagTrackingEnabled ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+                            <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                              style={{ transform: bagTrackingEnabled ? 'translateX(20px)' : 'translateX(0)' }} />
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
                 ))}
               </div>
             )}
@@ -123,6 +147,21 @@ export default function AddonManager() {
                 ))}
               </div>
             )}
+
+            {/* Integration Addons */}
+            {integrationAddons.length > 0 && (
+              <div>
+                <div className="px-6 py-2.5 border-b border-t flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
+                  <Link2 size={13} style={{ color: 'var(--text-muted)' }} />
+                  <span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
+                    {t('admin.addons.type.integration')} — {t('admin.addons.integrationHint')}
+                  </span>
+                </div>
+                {integrationAddons.map(addon => (
+                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                ))}
+              </div>
+            )}
           </div>
         )}
       </div>
@@ -136,8 +175,21 @@ interface AddonRowProps {
   t: (key: string) => string
 }
 
+function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string; description: string } {
+  const nameKey = `admin.addons.catalog.${addon.id}.name`
+  const descKey = `admin.addons.catalog.${addon.id}.description`
+  const translatedName = t(nameKey)
+  const translatedDescription = t(descKey)
+
+  return {
+    name: translatedName !== nameKey ? translatedName : addon.name,
+    description: translatedDescription !== descKey ? translatedDescription : addon.description,
+  }
+}
+
 function AddonRow({ addon, onToggle, t }: AddonRowProps) {
   const isComingSoon = false
+  const label = getAddonLabel(t, addon)
   return (
     <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)', opacity: isComingSoon ? 0.5 : 1, pointerEvents: isComingSoon ? 'none' : 'auto' }}>
       {/* Icon */}
@@ -148,25 +200,22 @@ function AddonRow({ addon, onToggle, t }: AddonRowProps) {
       {/* Info */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{addon.name}</span>
+          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{label.name}</span>
           {isComingSoon && (
             <span className="text-[9px] font-semibold px-2 py-0.5 rounded-full" style={{ background: 'var(--bg-tertiary)', color: 'var(--text-faint)' }}>
               Coming Soon
             </span>
           )}
-          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full" style={{
-            background: addon.type === 'global' ? 'var(--bg-secondary)' : 'var(--bg-secondary)',
-            color: 'var(--text-muted)',
-          }}>
-            {addon.type === 'global' ? t('admin.addons.type.global') : t('admin.addons.type.trip')}
+          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full" style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}>
+            {addon.type === 'global' ? t('admin.addons.type.global') : addon.type === 'integration' ? t('admin.addons.type.integration') : t('admin.addons.type.trip')}
           </span>
         </div>
-        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{addon.description}</p>
+        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{label.description}</p>
       </div>
 
       {/* Toggle */}
       <div className="flex items-center gap-2 shrink-0">
-        <span className="text-xs font-medium" style={{ color: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+        <span className="hidden sm:inline text-xs font-medium" style={{ color: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
           {isComingSoon ? t('admin.addons.disabled') : addon.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
         </span>
         <button

client/src/components/Admin/AdminMcpTokensPanel.tsx

@@ -0,0 +1,120 @@
+import { useState, useEffect } from 'react'
+import { adminApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import { Key, Trash2, User, Loader2 } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+interface AdminMcpToken {
+  id: number
+  name: string
+  token_prefix: string
+  created_at: string
+  last_used_at: string | null
+  user_id: number
+  username: string
+}
+
+export default function AdminMcpTokensPanel() {
+  const [tokens, setTokens] = useState<AdminMcpToken[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [deleteConfirmId, setDeleteConfirmId] = useState<number | null>(null)
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+
+  useEffect(() => {
+    setIsLoading(true)
+    adminApi.mcpTokens()
+      .then(d => setTokens(d.tokens || []))
+      .catch(() => toast.error(t('admin.mcpTokens.loadError')))
+      .finally(() => setIsLoading(false))
+  }, [])
+
+  const handleDelete = async (id: number) => {
+    try {
+      await adminApi.deleteMcpToken(id)
+      setTokens(prev => prev.filter(tk => tk.id !== id))
+      setDeleteConfirmId(null)
+      toast.success(t('admin.mcpTokens.deleteSuccess'))
+    } catch {
+      toast.error(t('admin.mcpTokens.deleteError'))
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.mcpTokens.title')}</h2>
+        <p className="text-sm mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{t('admin.mcpTokens.subtitle')}</p>
+      </div>
+
+      <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}>
+        {isLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="w-5 h-5 animate-spin" style={{ color: 'var(--text-tertiary)' }} />
+          </div>
+        ) : tokens.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 gap-2">
+            <Key className="w-8 h-8" style={{ color: 'var(--text-tertiary)' }} />
+            <p className="text-sm" style={{ color: 'var(--text-tertiary)' }}>{t('admin.mcpTokens.empty')}</p>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-x-4 px-4 py-2.5 text-xs font-medium border-b"
+              style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)' }}>
+              <span>{t('admin.mcpTokens.tokenName')}</span>
+              <span>{t('admin.mcpTokens.owner')}</span>
+              <span className="text-right">{t('admin.mcpTokens.created')}</span>
+              <span className="text-right">{t('admin.mcpTokens.lastUsed')}</span>
+              <span></span>
+            </div>
+            {tokens.map((token, i) => (
+              <div key={token.id}
+                className="grid grid-cols-[1fr_auto_auto_auto_auto] items-center gap-x-4 px-4 py-3"
+                style={{ borderBottom: i < tokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
+                <div className="min-w-0">
+                  <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{token.name}</p>
+                  <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{token.token_prefix}...</p>
+                </div>
+                <div className="flex items-center gap-1.5 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  <User className="w-3.5 h-3.5 flex-shrink-0" />
+                  <span className="whitespace-nowrap">{token.username}</span>
+                </div>
+                <span className="text-xs whitespace-nowrap text-right" style={{ color: 'var(--text-tertiary)' }}>
+                  {new Date(token.created_at).toLocaleDateString(locale)}
+                </span>
+                <span className="text-xs whitespace-nowrap text-right" style={{ color: 'var(--text-tertiary)' }}>
+                  {token.last_used_at ? new Date(token.last_used_at).toLocaleDateString(locale) : t('admin.mcpTokens.never')}
+                </span>
+                <button onClick={() => setDeleteConfirmId(token.id)}
+                  className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                  style={{ color: 'var(--text-tertiary)' }} title={t('common.delete')}>
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+
+      {deleteConfirmId !== null && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
+          onClick={e => { if (e.target === e.currentTarget) setDeleteConfirmId(null) }}>
+          <div className="rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
+            <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.mcpTokens.deleteTitle')}</h3>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('admin.mcpTokens.deleteMessage')}</p>
+            <div className="flex gap-2 justify-end">
+              <button onClick={() => setDeleteConfirmId(null)}
+                className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                {t('common.cancel')}
+              </button>
+              <button onClick={() => handleDelete(deleteConfirmId)}
+                className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
+                {t('common.delete')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Admin/AuditLogPanel.tsx

@@ -0,0 +1,171 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { adminApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+import { RefreshCw, ClipboardList } from 'lucide-react'
+
+interface AuditEntry {
+  id: number
+  created_at: string
+  user_id: number | null
+  username: string | null
+  user_email: string | null
+  action: string
+  resource: string | null
+  details: Record<string, unknown> | null
+  ip: string | null
+}
+
+interface AuditLogPanelProps {
+  serverTimezone?: string
+}
+
+export default function AuditLogPanel({ serverTimezone }: AuditLogPanelProps): React.ReactElement {
+  const { t, locale } = useTranslation()
+  const [entries, setEntries] = useState<AuditEntry[]>([])
+  const [total, setTotal] = useState(0)
+  const [offset, setOffset] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const limit = 100
+
+  const loadFirstPage = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await adminApi.auditLog({ limit, offset: 0 }) as {
+        entries: AuditEntry[]
+        total: number
+      }
+      setEntries(data.entries || [])
+      setTotal(data.total ?? 0)
+      setOffset(0)
+    } catch {
+      setEntries([])
+      setTotal(0)
+      setOffset(0)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const loadMore = useCallback(async () => {
+    const nextOffset = offset + limit
+    setLoading(true)
+    try {
+      const data = await adminApi.auditLog({ limit, offset: nextOffset }) as {
+        entries: AuditEntry[]
+        total: number
+      }
+      setEntries((prev) => [...prev, ...(data.entries || [])])
+      setTotal(data.total ?? 0)
+      setOffset(nextOffset)
+    } catch {
+      /* keep existing */
+    } finally {
+      setLoading(false)
+    }
+  }, [offset])
+
+  useEffect(() => {
+    loadFirstPage()
+  }, [loadFirstPage])
+
+  const fmtTime = (iso: string) => {
+    try {
+      return new Date(iso.endsWith('Z') ? iso : iso + 'Z').toLocaleString(locale, {
+        dateStyle: 'short',
+        timeStyle: 'medium',
+        timeZone: serverTimezone || undefined,
+      })
+    } catch {
+      return iso
+    }
+  }
+
+  const fmtDetails = (d: Record<string, unknown> | null) => {
+    if (!d || Object.keys(d).length === 0) return '—'
+    try {
+      return JSON.stringify(d)
+    } catch {
+      return '—'
+    }
+  }
+
+  const userLabel = (e: AuditEntry) => {
+    if (e.username) return e.username
+    if (e.user_email) return e.user_email
+    if (e.user_id != null) return `#${e.user_id}`
+    return '—'
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h2 className="font-semibold text-lg m-0 flex items-center gap-2" style={{ color: 'var(--text-primary)' }}>
+            <ClipboardList size={20} />
+            {t('admin.tabs.audit')}
+          </h2>
+          <p className="text-sm m-0 mt-1" style={{ color: 'var(--text-muted)' }}>{t('admin.audit.subtitle')}</p>
+        </div>
+        <button
+          type="button"
+          disabled={loading}
+          onClick={() => loadFirstPage()}
+          className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-opacity disabled:opacity-50"
+          style={{ borderColor: 'var(--border-primary)', color: 'var(--text-primary)', background: 'var(--bg-card)' }}
+        >
+          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
+          {t('admin.audit.refresh')}
+        </button>
+      </div>
+
+      <p className="text-xs m-0" style={{ color: 'var(--text-faint)' }}>
+        {t('admin.audit.showing', { count: entries.length, total })}
+      </p>
+
+      {loading && entries.length === 0 ? (
+        <div className="py-12 text-center text-sm" style={{ color: 'var(--text-muted)' }}>{t('common.loading')}</div>
+      ) : entries.length === 0 ? (
+        <div className="py-12 text-center text-sm" style={{ color: 'var(--text-muted)' }}>{t('admin.audit.empty')}</div>
+      ) : (
+        <div className="rounded-xl border overflow-x-auto" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}>
+          <table className="w-full text-sm border-collapse min-w-[720px]">
+            <thead>
+              <tr className="border-b text-left" style={{ borderColor: 'var(--border-secondary)' }}>
+                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.time')}</th>
+                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.user')}</th>
+                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.action')}</th>
+                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.resource')}</th>
+                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.ip')}</th>
+                <th className="p-3 font-semibold" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.details')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map((e) => (
+                <tr key={e.id} className="border-b align-top" style={{ borderColor: 'var(--border-secondary)' }}>
+                  <td className="p-3 whitespace-nowrap font-mono text-xs" style={{ color: 'var(--text-primary)' }}>{fmtTime(e.created_at)}</td>
+                  <td className="p-3" style={{ color: 'var(--text-primary)' }}>{userLabel(e)}</td>
+                  <td className="p-3 font-mono text-xs" style={{ color: 'var(--text-primary)' }}>{e.action}</td>
+                  <td className="p-3 font-mono text-xs break-all max-w-[140px]" style={{ color: 'var(--text-muted)' }}>{e.resource || '—'}</td>
+                  <td className="p-3 font-mono text-xs whitespace-nowrap" style={{ color: 'var(--text-muted)' }}>{e.ip || '—'}</td>
+                  <td className="p-3 font-mono text-xs break-all max-w-[280px]" style={{ color: 'var(--text-faint)' }}>{fmtDetails(e.details)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {entries.length < total && (
+        <button
+          type="button"
+          disabled={loading}
+          onClick={() => loadMore()}
+          className="text-sm font-medium underline-offset-2 hover:underline disabled:opacity-50"
+          style={{ color: 'var(--text-secondary)' }}
+        >
+          {t('admin.audit.loadMore')}
+        </button>
+      )}
+    </div>
+  )
+}

client/src/components/Admin/BackupPanel.tsx

@@ -3,6 +3,8 @@ import { backupApi } from '../../api/client'
 import { useToast } from '../shared/Toast'
 import { Download, Trash2, Plus, RefreshCw, RotateCcw, Upload, Clock, Check, HardDrive, AlertTriangle } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../store/settingsStore'
+import CustomSelect from '../shared/CustomSelect'
 import { getApiErrorMessage } from '../../types'
 
 const INTERVAL_OPTIONS = [
@@ -21,19 +23,35 @@ const KEEP_OPTIONS = [
   { value: 0,  labelKey: 'backup.keep.forever' },
 ]
 
+const DAYS_OF_WEEK = [
+  { value: 0, labelKey: 'backup.dow.sunday' },
+  { value: 1, labelKey: 'backup.dow.monday' },
+  { value: 2, labelKey: 'backup.dow.tuesday' },
+  { value: 3, labelKey: 'backup.dow.wednesday' },
+  { value: 4, labelKey: 'backup.dow.thursday' },
+  { value: 5, labelKey: 'backup.dow.friday' },
+  { value: 6, labelKey: 'backup.dow.saturday' },
+]
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i)
+
+const DAYS_OF_MONTH = Array.from({ length: 28 }, (_, i) => i + 1)
+
 export default function BackupPanel() {
   const [backups, setBackups] = useState([])
   const [isLoading, setIsLoading] = useState(false)
   const [isCreating, setIsCreating] = useState(false)
   const [restoringFile, setRestoringFile] = useState(null)
   const [isUploading, setIsUploading] = useState(false)
-  const [autoSettings, setAutoSettings] = useState({ enabled: false, interval: 'daily', keep_days: 7 })
+  const [autoSettings, setAutoSettings] = useState({ enabled: false, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 })
   const [autoSettingsSaving, setAutoSettingsSaving] = useState(false)
   const [autoSettingsDirty, setAutoSettingsDirty] = useState(false)
+  const [serverTimezone, setServerTimezone] = useState('')
   const [restoreConfirm, setRestoreConfirm] = useState(null) // { type: 'file'|'upload', filename, file? }
   const fileInputRef = useRef(null)
   const toast = useToast()
   const { t, language, locale } = useTranslation()
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
 
   const loadBackups = async () => {
     setIsLoading(true)
@@ -51,6 +69,7 @@ export default function BackupPanel() {
     try {
       const data = await backupApi.getAutoSettings()
       setAutoSettings(data.settings)
+      if (data.timezone) setServerTimezone(data.timezone)
     } catch {}
   }
 
@@ -147,10 +166,12 @@ export default function BackupPanel() {
   const formatDate = (dateStr) => {
     if (!dateStr) return '-'
     try {
-      return new Date(dateStr).toLocaleString(locale, {
+      const opts: Intl.DateTimeFormatOptions = {
         day: '2-digit', month: '2-digit', year: 'numeric',
         hour: '2-digit', minute: '2-digit',
-      })
+      }
+      if (serverTimezone) opts.timeZone = serverTimezone
+      return new Date(dateStr).toLocaleString(locale, opts)
     } catch { return dateStr }
   }
 
@@ -303,9 +324,11 @@ export default function BackupPanel() {
             </div>
             <button
               onClick={() => handleAutoSettingsChange('enabled', !autoSettings.enabled)}
-              className={`relative shrink-0 inline-flex h-6 w-11 items-center rounded-full transition-colors ${autoSettings.enabled ? 'bg-slate-900 dark:bg-slate-100' : 'bg-gray-200 dark:bg-gray-600'}`}
+              className="relative shrink-0 inline-flex h-6 w-11 items-center rounded-full transition-colors"
+              style={{ background: autoSettings.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
             >
-              <span className={`absolute left-1 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${autoSettings.enabled ? 'translate-x-5' : 'translate-x-0'}`} />
+              <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                style={{ transform: autoSettings.enabled ? 'translateX(20px)' : 'translateX(0)' }} />
             </button>
           </label>
 
@@ -331,6 +354,68 @@ export default function BackupPanel() {
                 </div>
               </div>
 
+              {/* Hour picker (for daily, weekly, monthly) */}
+              {autoSettings.interval !== 'hourly' && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.hour')}</label>
+                  <CustomSelect
+                    value={String(autoSettings.hour)}
+                    onChange={v => handleAutoSettingsChange('hour', parseInt(v, 10))}
+                    size="sm"
+                    options={HOURS.map(h => {
+                      let label: string
+                      if (is12h) {
+                        const period = h >= 12 ? 'PM' : 'AM'
+                        const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
+                        label = `${h12}:00 ${period}`
+                      } else {
+                        label = `${String(h).padStart(2, '0')}:00`
+                      }
+                      return { value: String(h), label }
+                    })}
+                  />
+                  <p className="text-xs text-gray-400 mt-1">
+                    {t('backup.auto.hourHint', { format: is12h ? '12h' : '24h' })}{serverTimezone ? ` (Timezone: ${serverTimezone})` : ''}
+                  </p>
+                </div>
+              )}
+
+              {/* Day of week (for weekly) */}
+              {autoSettings.interval === 'weekly' && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.dayOfWeek')}</label>
+                  <div className="flex flex-wrap gap-2">
+                    {DAYS_OF_WEEK.map(opt => (
+                      <button
+                        key={opt.value}
+                        onClick={() => handleAutoSettingsChange('day_of_week', opt.value)}
+                        className={`px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
+                          autoSettings.day_of_week === opt.value
+                            ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 border-slate-700'
+                            : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+                        }`}
+                      >
+                        {t(opt.labelKey)}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Day of month (for monthly) */}
+              {autoSettings.interval === 'monthly' && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.dayOfMonth')}</label>
+                  <CustomSelect
+                    value={String(autoSettings.day_of_month)}
+                    onChange={v => handleAutoSettingsChange('day_of_month', parseInt(v, 10))}
+                    size="sm"
+                    options={DAYS_OF_MONTH.map(d => ({ value: String(d), label: String(d) }))}
+                  />
+                  <p className="text-xs text-gray-400 mt-1">{t('backup.auto.dayOfMonthHint')}</p>
+                </div>
+              )}
+
               {/* Keep duration */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.keepLabel')}</label>

client/src/components/Admin/CategoryManager.tsx

@@ -198,7 +198,6 @@ export default function CategoryManager() {
           className="flex items-center gap-2 bg-slate-900 text-white px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium">
           <Plus className="w-4 h-4" />
           <span className="hidden sm:inline">{t('categories.new')}</span>
-          <span className="sm:hidden">Add</span>
         </button>
       </div>
 

client/src/components/Admin/GitHubPanel.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Tag, Calendar, ExternalLink, ChevronDown, ChevronUp, Loader2, Heart, Coffee } from 'lucide-react'
-import { useTranslation } from '../../i18n'
+import { getLocaleForLanguage, useTranslation } from '../../i18n'
 import apiClient from '../../api/client'
 
 const REPO = 'mauriceboe/NOMAD'
@@ -18,8 +18,8 @@ export default function GitHubPanel() {
 
   const fetchReleases = async (pageNum = 1, append = false) => {
     try {
-      const res = await apiClient.get(`/auth/github-releases`, { params: { per_page: PER_PAGE, page: pageNum } })
-      const data = res.data
+      const res = await apiClient.get(`/admin/github-releases`, { params: { per_page: PER_PAGE, page: pageNum } })
+      const data = Array.isArray(res.data) ? res.data : []
       setReleases(prev => append ? [...prev, ...data] : data)
       setHasMore(data.length === PER_PAGE)
     } catch (err: unknown) {
@@ -46,7 +46,7 @@ export default function GitHubPanel() {
 
   const formatDate = (dateStr) => {
     const d = new Date(dateStr)
-    return d.toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { day: 'numeric', month: 'short', year: 'numeric' })
+    return d.toLocaleDateString(getLocaleForLanguage(language), { day: 'numeric', month: 'short', year: 'numeric' })
   }
 
   // Simple markdown-to-html for release notes (handles headers, bold, lists, links)
@@ -72,11 +72,15 @@ export default function GitHubPanel() {
       }
     }
 
+    const escapeHtml = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
     const inlineFormat = (text) => {
-      return text
+      return escapeHtml(text)
         .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
         .replace(/`(.+?)`/g, '<code style="font-size:11px;padding:1px 4px;border-radius:4px;background:var(--bg-secondary)">$1</code>')
-        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" style="color:#3b82f6;text-decoration:underline">$1</a>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) => {
+          const safeUrl = url.startsWith('http://') || url.startsWith('https://') ? url : '#'
+          return `<a href="${escapeHtml(safeUrl)}" target="_blank" rel="noopener noreferrer" style="color:#3b82f6;text-decoration:underline">${label}</a>`
+        })
     }
 
     for (const line of lines) {
@@ -130,7 +134,7 @@ export default function GitHubPanel() {
           </div>
           <div>
             <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Ko-fi</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{language === 'de' ? 'Hilft mir, TREK weiterzuentwickeln' : 'Helps me keep building TREK'}</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('admin.github.support')}</div>
           </div>
           <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
         </a>
@@ -148,7 +152,7 @@ export default function GitHubPanel() {
           </div>
           <div>
             <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Buy Me a Coffee</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{language === 'de' ? 'Hilft mir, TREK weiterzuentwickeln' : 'Helps me keep building TREK'}</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('admin.github.support')}</div>
           </div>
           <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
         </a>

client/src/components/Admin/PackingTemplateManager.tsx

@@ -0,0 +1,306 @@
+import { useState, useEffect, useRef } from 'react'
+import { adminApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { Plus, Trash2, Edit2, Package, X, Check, ChevronDown, ChevronRight, FolderPlus } from 'lucide-react'
+
+interface TemplateCategory { id: number; template_id: number; name: string; sort_order: number }
+interface TemplateItem { id: number; category_id: number; name: string; sort_order: number }
+interface Template { id: number; name: string; item_count: number; category_count: number; created_by_name: string }
+
+export default function PackingTemplateManager() {
+  const [templates, setTemplates] = useState<Template[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [showCreate, setShowCreate] = useState(false)
+  const [createName, setCreateName] = useState('')
+
+  // Expanded template state
+  const [expandedId, setExpandedId] = useState<number | null>(null)
+  const [categories, setCategories] = useState<TemplateCategory[]>([])
+  const [items, setItems] = useState<TemplateItem[]>([])
+
+  // Editing states
+  const [editingTemplate, setEditingTemplate] = useState<number | null>(null)
+  const [editTemplateName, setEditTemplateName] = useState('')
+  const [editingCatId, setEditingCatId] = useState<number | null>(null)
+  const [editCatName, setEditCatName] = useState('')
+  const [editingItemId, setEditingItemId] = useState<number | null>(null)
+  const [editItemName, setEditItemName] = useState('')
+
+  // Adding states
+  const [addingCategory, setAddingCategory] = useState(false)
+  const [newCatName, setNewCatName] = useState('')
+  const [addingItemToCatId, setAddingItemToCatId] = useState<number | null>(null)
+  const [newItemName, setNewItemName] = useState('')
+  const addItemRef = useRef<HTMLInputElement>(null)
+
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  useEffect(() => { loadTemplates() }, [])
+
+  const loadTemplates = async () => {
+    setIsLoading(true)
+    try {
+      const data = await adminApi.packingTemplates()
+      setTemplates(data.templates || [])
+    } catch { toast.error(t('admin.packingTemplates.loadError')) }
+    finally { setIsLoading(false) }
+  }
+
+  const toggleExpand = async (id: number) => {
+    if (expandedId === id) { setExpandedId(null); return }
+    setExpandedId(id)
+    setAddingCategory(false)
+    setAddingItemToCatId(null)
+    try {
+      const data = await adminApi.getPackingTemplate(id)
+      setCategories(data.categories || [])
+      setItems(data.items || [])
+    } catch { toast.error(t('admin.packingTemplates.loadError')) }
+  }
+
+  // Template CRUD
+  const handleCreateTemplate = async () => {
+    if (!createName.trim()) return
+    try {
+      const data = await adminApi.createPackingTemplate({ name: createName.trim() })
+      setTemplates(prev => [{ ...data.template, item_count: 0, category_count: 0 }, ...prev])
+      setCreateName(''); setShowCreate(false)
+      setExpandedId(data.template.id); setCategories([]); setItems([])
+      toast.success(t('admin.packingTemplates.created'))
+    } catch { toast.error(t('admin.packingTemplates.createError')) }
+  }
+
+  const handleDeleteTemplate = async (id: number) => {
+    try {
+      await adminApi.deletePackingTemplate(id)
+      setTemplates(prev => prev.filter(t => t.id !== id))
+      if (expandedId === id) setExpandedId(null)
+      toast.success(t('admin.packingTemplates.deleted'))
+    } catch { toast.error(t('admin.packingTemplates.deleteError')) }
+  }
+
+  const handleRenameTemplate = async (id: number) => {
+    if (!editTemplateName.trim()) { setEditingTemplate(null); return }
+    try {
+      await adminApi.updatePackingTemplate(id, { name: editTemplateName.trim() })
+      setTemplates(prev => prev.map(t => t.id === id ? { ...t, name: editTemplateName.trim() } : t))
+      setEditingTemplate(null)
+    } catch { toast.error(t('admin.packingTemplates.saveError')) }
+  }
+
+  // Category CRUD
+  const handleAddCategory = async () => {
+    if (!newCatName.trim() || !expandedId) return
+    try {
+      const data = await adminApi.addTemplateCategory(expandedId, { name: newCatName.trim() })
+      setCategories(prev => [...prev, data.category])
+      setNewCatName(''); setAddingCategory(false)
+    } catch { toast.error(t('admin.packingTemplates.saveError')) }
+  }
+
+  const handleRenameCategory = async (catId: number) => {
+    if (!editCatName.trim() || !expandedId) { setEditingCatId(null); return }
+    try {
+      await adminApi.updateTemplateCategory(expandedId, catId, { name: editCatName.trim() })
+      setCategories(prev => prev.map(c => c.id === catId ? { ...c, name: editCatName.trim() } : c))
+      setEditingCatId(null)
+    } catch { toast.error(t('admin.packingTemplates.saveError')) }
+  }
+
+  const handleDeleteCategory = async (catId: number) => {
+    if (!expandedId) return
+    try {
+      await adminApi.deleteTemplateCategory(expandedId, catId)
+      setCategories(prev => prev.filter(c => c.id !== catId))
+      setItems(prev => prev.filter(i => i.category_id !== catId))
+    } catch { toast.error(t('admin.packingTemplates.deleteError')) }
+  }
+
+  // Item CRUD
+  const handleAddItem = async (catId: number) => {
+    if (!newItemName.trim() || !expandedId) return
+    try {
+      const data = await adminApi.addTemplateItem(expandedId, catId, { name: newItemName.trim() })
+      setItems(prev => [...prev, data.item])
+      setNewItemName('')
+      setTimeout(() => addItemRef.current?.focus(), 30)
+    } catch { toast.error(t('admin.packingTemplates.saveError')) }
+  }
+
+  const handleRenameItem = async (itemId: number) => {
+    if (!editItemName.trim() || !expandedId) { setEditingItemId(null); return }
+    try {
+      await adminApi.updateTemplateItem(expandedId, itemId, { name: editItemName.trim() })
+      setItems(prev => prev.map(i => i.id === itemId ? { ...i, name: editItemName.trim() } : i))
+      setEditingItemId(null)
+    } catch { toast.error(t('admin.packingTemplates.saveError')) }
+  }
+
+  const handleDeleteItem = async (itemId: number) => {
+    if (!expandedId) return
+    try {
+      await adminApi.deleteTemplateItem(expandedId, itemId)
+      setItems(prev => prev.filter(i => i.id !== itemId))
+    } catch { toast.error(t('admin.packingTemplates.deleteError')) }
+  }
+
+  const inputStyle = 'w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent outline-none'
+  const btnIcon = 'p-1.5 rounded-lg transition-colors'
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+      {/* Header */}
+      <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+        <div>
+          <h2 className="font-semibold text-slate-900">{t('admin.packingTemplates.title')}</h2>
+          <p className="text-xs text-slate-400 mt-1">{t('admin.packingTemplates.subtitle')}</p>
+        </div>
+        <button onClick={() => setShowCreate(true)}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors">
+          <Plus className="w-4 h-4" /> <span className="hidden sm:inline">{t('admin.packingTemplates.create')}</span>
+        </button>
+      </div>
+
+      {/* Create template */}
+      {showCreate && (
+        <div className="px-5 py-3 border-b border-slate-100 flex items-center gap-3">
+          <Package size={16} className="text-slate-400 flex-shrink-0" />
+          <input autoFocus value={createName} onChange={e => setCreateName(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') handleCreateTemplate(); if (e.key === 'Escape') setShowCreate(false) }}
+            placeholder={t('admin.packingTemplates.namePlaceholder')} className={inputStyle} />
+          <button onClick={handleCreateTemplate} className={`${btnIcon} text-slate-600 hover:text-slate-900`}><Check size={16} /></button>
+          <button onClick={() => setShowCreate(false)} className={`${btnIcon} text-slate-400 hover:text-slate-600`}><X size={16} /></button>
+        </div>
+      )}
+
+      {/* Template list */}
+      {isLoading ? (
+        <div className="p-8 text-center"><div className="w-8 h-8 border-2 border-slate-200 border-t-slate-900 rounded-full animate-spin mx-auto" /></div>
+      ) : templates.length === 0 ? (
+        <div className="p-8 text-center text-sm text-slate-400">{t('admin.packingTemplates.empty')}</div>
+      ) : (
+        <div className="divide-y divide-slate-100">
+          {templates.map(tmpl => (
+            <div key={tmpl.id}>
+              {/* Template row */}
+              <div className="px-5 py-3 flex items-center gap-3 hover:bg-slate-50 transition-colors">
+                <button onClick={() => toggleExpand(tmpl.id)} className="text-slate-400 flex-shrink-0 p-0 bg-transparent border-none cursor-pointer">
+                  {expandedId === tmpl.id ? <ChevronDown size={15} /> : <ChevronRight size={15} />}
+                </button>
+                <Package size={16} className="text-slate-400 flex-shrink-0" />
+                {editingTemplate === tmpl.id ? (
+                  <input autoFocus value={editTemplateName} onChange={e => setEditTemplateName(e.target.value)}
+                    onBlur={() => handleRenameTemplate(tmpl.id)}
+                    onKeyDown={e => { if (e.key === 'Enter') handleRenameTemplate(tmpl.id); if (e.key === 'Escape') setEditingTemplate(null) }}
+                    className="flex-1 px-2 py-0.5 border border-slate-300 rounded text-sm" />
+                ) : (
+                  <span onClick={() => toggleExpand(tmpl.id)} className="flex-1 text-sm font-medium text-slate-700 cursor-pointer">{tmpl.name}</span>
+                )}
+                <span className="text-xs text-slate-400 px-2 py-0.5 bg-slate-100 rounded-full">
+                  {tmpl.category_count} {t('admin.packingTemplates.categories')} · {tmpl.item_count} {t('admin.packingTemplates.items')}
+                </span>
+                <button onClick={() => { setEditingTemplate(tmpl.id); setEditTemplateName(tmpl.name) }}
+                  className={`${btnIcon} hover:bg-slate-100 text-slate-400 hover:text-slate-700`}><Edit2 size={14} /></button>
+                <button onClick={() => handleDeleteTemplate(tmpl.id)}
+                  className={`${btnIcon} hover:bg-red-50 text-slate-400 hover:text-red-500`}><Trash2 size={14} /></button>
+              </div>
+
+              {/* Expanded content */}
+              {expandedId === tmpl.id && (
+                <div className="px-5 pb-4 ml-8 space-y-3">
+                  {categories.map(cat => {
+                    const catItems = items.filter(i => i.category_id === cat.id)
+                    return (
+                      <div key={cat.id} className="border border-slate-200 rounded-lg overflow-hidden">
+                        {/* Category header */}
+                        <div className="flex items-center gap-2 px-4 py-2.5 bg-slate-50">
+                          {editingCatId === cat.id ? (
+                            <>
+                              <input autoFocus value={editCatName} onChange={e => setEditCatName(e.target.value)}
+                                onBlur={() => handleRenameCategory(cat.id)}
+                                onKeyDown={e => { if (e.key === 'Enter') handleRenameCategory(cat.id); if (e.key === 'Escape') setEditingCatId(null) }}
+                                className="flex-1 px-2 py-0.5 border border-slate-300 rounded text-sm font-semibold" />
+                            </>
+                          ) : (
+                            <span className="flex-1 text-xs font-bold text-slate-500 uppercase tracking-wider">{cat.name}</span>
+                          )}
+                          <span className="text-xs text-slate-400">{catItems.length}</span>
+                          <button onClick={() => { setAddingItemToCatId(addingItemToCatId === cat.id ? null : cat.id); setNewItemName(''); setTimeout(() => addItemRef.current?.focus(), 30) }}
+                            className={`${btnIcon} text-slate-400 hover:text-slate-700`}><Plus size={13} /></button>
+                          <button onClick={() => { setEditingCatId(cat.id); setEditCatName(cat.name) }}
+                            className={`${btnIcon} text-slate-400 hover:text-slate-700`}><Edit2 size={13} /></button>
+                          <button onClick={() => handleDeleteCategory(cat.id)}
+                            className={`${btnIcon} text-slate-400 hover:text-red-500`}><Trash2 size={13} /></button>
+                        </div>
+
+                        {/* Items */}
+                        {(catItems.length > 0 || addingItemToCatId === cat.id) && (
+                          <div className="divide-y divide-slate-50">
+                            {catItems.map(item => (
+                              <div key={item.id} className="flex items-center gap-3 px-4 py-2 group">
+                                {editingItemId === item.id ? (
+                                  <>
+                                    <input autoFocus value={editItemName} onChange={e => setEditItemName(e.target.value)}
+                                      onKeyDown={e => { if (e.key === 'Enter') handleRenameItem(item.id); if (e.key === 'Escape') setEditingItemId(null) }}
+                                      className="flex-1 px-2 py-1 border border-slate-200 rounded-lg text-sm" />
+                                    <button onClick={() => handleRenameItem(item.id)} className="p-1 text-slate-600 hover:text-slate-900"><Check size={13} /></button>
+                                    <button onClick={() => setEditingItemId(null)} className="p-1 text-slate-400"><X size={13} /></button>
+                                  </>
+                                ) : (
+                                  <>
+                                    <span className="flex-1 text-sm text-slate-700">{item.name}</span>
+                                    <button onClick={() => { setEditingItemId(item.id); setEditItemName(item.name) }}
+                                      className="p-1 rounded opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-700 transition-all"><Edit2 size={12} /></button>
+                                    <button onClick={() => handleDeleteItem(item.id)}
+                                      className="p-1 rounded opacity-0 group-hover:opacity-100 text-slate-400 hover:text-red-500 transition-all"><Trash2 size={12} /></button>
+                                  </>
+                                )}
+                              </div>
+                            ))}
+
+                            {/* Add item inline */}
+                            {addingItemToCatId === cat.id && (
+                              <div className="flex items-center gap-2 px-4 py-2">
+                                <input ref={addItemRef} value={newItemName} onChange={e => setNewItemName(e.target.value)}
+                                  onKeyDown={e => { if (e.key === 'Enter' && newItemName.trim()) handleAddItem(cat.id); if (e.key === 'Escape') { setAddingItemToCatId(null); setNewItemName('') } }}
+                                  placeholder={t('admin.packingTemplates.itemName')}
+                                  className="flex-1 px-2 py-1 border border-slate-200 rounded-lg text-sm" />
+                                <button onClick={() => handleAddItem(cat.id)} disabled={!newItemName.trim()}
+                                  className="p-1.5 rounded-lg bg-slate-900 text-white disabled:bg-slate-300 hover:bg-slate-700 transition-colors"><Plus size={13} /></button>
+                                <button onClick={() => { setAddingItemToCatId(null); setNewItemName('') }}
+                                  className="p-1 text-slate-400 hover:text-slate-600"><X size={13} /></button>
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+
+                  {/* Add category button */}
+                  {addingCategory ? (
+                    <div className="flex items-center gap-2">
+                      <input autoFocus value={newCatName} onChange={e => setNewCatName(e.target.value)}
+                        onKeyDown={e => { if (e.key === 'Enter') handleAddCategory(); if (e.key === 'Escape') { setAddingCategory(false); setNewCatName('') } }}
+                        placeholder={t('admin.packingTemplates.categoryName')}
+                        className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm" />
+                      <button onClick={handleAddCategory} className={`${btnIcon} text-slate-600 hover:text-slate-900`}><Check size={15} /></button>
+                      <button onClick={() => { setAddingCategory(false); setNewCatName('') }} className={`${btnIcon} text-slate-400`}><X size={15} /></button>
+                    </div>
+                  ) : (
+                    <button onClick={() => setAddingCategory(true)}
+                      className="flex items-center gap-2 px-3 py-2.5 w-full text-sm text-slate-400 hover:text-slate-600 border border-dashed border-slate-200 rounded-lg hover:border-slate-400 transition-colors">
+                      <FolderPlus size={14} /> {t('admin.packingTemplates.addCategory')}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Admin/PermissionsPanel.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { adminApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+import { usePermissionsStore, PermissionLevel } from '../../store/permissionsStore'
+import { useToast } from '../shared/Toast'
+import { Save, Loader2, RotateCcw } from 'lucide-react'
+import CustomSelect from '../shared/CustomSelect'
+
+interface PermissionEntry {
+  key: string
+  level: PermissionLevel
+  defaultLevel: PermissionLevel
+  allowedLevels: PermissionLevel[]
+}
+
+const LEVEL_LABELS: Record<string, string> = {
+  admin: 'perm.level.admin',
+  trip_owner: 'perm.level.tripOwner',
+  trip_member: 'perm.level.tripMember',
+  everybody: 'perm.level.everybody',
+}
+
+const CATEGORIES = [
+  { id: 'trip', keys: ['trip_create', 'trip_edit', 'trip_delete', 'trip_archive', 'trip_cover_upload'] },
+  { id: 'members', keys: ['member_manage'] },
+  { id: 'files', keys: ['file_upload', 'file_edit', 'file_delete'] },
+  { id: 'content', keys: ['place_edit', 'day_edit', 'reservation_edit'] },
+  { id: 'extras', keys: ['budget_edit', 'packing_edit', 'collab_edit', 'share_manage'] },
+]
+
+export default function PermissionsPanel(): React.ReactElement {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const [entries, setEntries] = useState<PermissionEntry[]>([])
+  const [values, setValues] = useState<Record<string, PermissionLevel>>({})
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [dirty, setDirty] = useState(false)
+
+  useEffect(() => {
+    loadPermissions()
+  }, [])
+
+  const loadPermissions = async () => {
+    setLoading(true)
+    try {
+      const data = await adminApi.getPermissions()
+      setEntries(data.permissions)
+      const vals: Record<string, PermissionLevel> = {}
+      for (const p of data.permissions) vals[p.key] = p.level
+      setValues(vals)
+      setDirty(false)
+    } catch {
+      toast.error(t('common.error'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChange = (key: string, level: PermissionLevel) => {
+    setValues(prev => ({ ...prev, [key]: level }))
+    setDirty(true)
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const data = await adminApi.updatePermissions(values)
+      if (data.permissions) {
+        usePermissionsStore.getState().setPermissions(data.permissions)
+      }
+      setDirty(false)
+      toast.success(t('perm.saved'))
+    } catch {
+      toast.error(t('common.error'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleReset = () => {
+    const defaults: Record<string, PermissionLevel> = {}
+    for (const p of entries) defaults[p.key] = p.defaultLevel
+    setValues(defaults)
+    setDirty(true)
+  }
+
+  const entryMap = useMemo(() => new Map(entries.map(e => [e.key, e])), [entries])
+
+  if (loading) {
+    return (
+      <div className="p-8 text-center">
+        <div className="w-8 h-8 border-2 border-slate-200 border-t-slate-900 rounded-full animate-spin mx-auto" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
+          <div>
+            <h2 className="font-semibold text-slate-900">{t('perm.title')}</h2>
+            <p className="text-xs text-slate-400 mt-0.5">{t('perm.subtitle')}</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleReset}
+              disabled={saving}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 disabled:opacity-40 transition-colors"
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+              {t('perm.resetDefaults')}
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={saving || !dirty}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 disabled:bg-slate-400 transition-colors"
+            >
+              {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+              {t('common.save')}
+            </button>
+          </div>
+        </div>
+
+        <div className="divide-y divide-slate-100">
+          {CATEGORIES.map(cat => (
+            <div key={cat.id} className="px-6 py-4">
+              <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">
+                {t(`perm.cat.${cat.id}`)}
+              </h3>
+              <div className="space-y-3">
+                {cat.keys.map(key => {
+                  const entry = entryMap.get(key)
+                  if (!entry) return null
+                  const currentLevel = values[key] || entry.defaultLevel
+                  const isDefault = currentLevel === entry.defaultLevel
+                  return (
+                    <div key={key} className="flex items-center justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-slate-700">{t(`perm.action.${key}`)}</p>
+                        <p className="text-xs text-slate-400 mt-0.5">{t(`perm.actionHint.${key}`)}</p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {!isDefault && (
+                          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-700">
+                            {t('perm.customized')}
+                          </span>
+                        )}
+                        <CustomSelect
+                          value={currentLevel}
+                          onChange={(val) => handleChange(key, val as PermissionLevel)}
+                          options={entry.allowedLevels.map(l => ({
+                            value: l,
+                            label: t(LEVEL_LABELS[l] || l),
+                          }))}
+                          style={{ minWidth: 160 }}
+                        />
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/Budget/BudgetPanel.tsx

@@ -2,10 +2,12 @@ import ReactDOM from 'react-dom'
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import DOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
+import { useCanDo } from '../../store/permissionsStore'
 import { useTranslation } from '../../i18n'
-import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check } from 'lucide-react'
+import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
 import { budgetApi } from '../../api/client'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import type { BudgetItem, BudgetMember } from '../../types'
 import { currencyDecimals } from '../../utils/formatters'
 
@@ -29,8 +31,23 @@ interface PerPersonSummaryEntry {
 }
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
-const CURRENCIES = ['EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK', 'TRY', 'THB', 'AUD', 'CAD']
-const SYMBOLS = { EUR: '€', USD: '$', GBP: '£', JPY: '¥', CHF: 'CHF', CZK: 'Kč', PLN: 'zł', SEK: 'kr', NOK: 'kr', DKK: 'kr', TRY: '₺', THB: '฿', AUD: 'A$', CAD: 'C$' }
+const CURRENCIES = [
+  'EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK',
+  'TRY', 'THB', 'AUD', 'CAD', 'NZD', 'BRL', 'MXN', 'INR', 'IDR', 'MYR',
+  'PHP', 'SGD', 'KRW', 'CNY', 'HKD', 'TWD', 'ZAR', 'AED', 'SAR', 'ILS',
+  'EGP', 'MAD', 'HUF', 'RON', 'BGN', 'HRK', 'ISK', 'RUB', 'UAH', 'BDT',
+  'LKR', 'VND', 'CLP', 'COP', 'PEN', 'ARS',
+]
+const SYMBOLS = {
+  EUR: '€', USD: '$', GBP: '£', JPY: '¥', CHF: 'CHF', CZK: 'Kč', PLN: 'zł',
+  SEK: 'kr', NOK: 'kr', DKK: 'kr', TRY: '₺', THB: '฿', AUD: 'A$', CAD: 'C$',
+  NZD: 'NZ$', BRL: 'R$', MXN: 'MX$', INR: '₹', IDR: 'Rp', MYR: 'RM',
+  PHP: '₱', SGD: 'S$', KRW: '₩', CNY: '¥', HKD: 'HK$', TWD: 'NT$',
+  ZAR: 'R', AED: 'د.إ', SAR: '﷼', ILS: '₪', EGP: 'E£', MAD: 'MAD',
+  HUF: 'Ft', RON: 'lei', BGN: 'лв', HRK: 'kn', ISK: 'kr', RUB: '₽',
+  UAH: '₴', BDT: '৳', LKR: 'Rs', VND: '₫', CLP: 'CL$', COP: 'CO$',
+  PEN: 'S/.', ARS: 'AR$',
+}
 const PIE_COLORS = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#14b8a6', '#f97316', '#06b6d4', '#84cc16', '#a855f7']
 
 const fmtNum = (v, locale, cur) => {
@@ -44,7 +61,7 @@ const calcPD = (p, d) => (d > 0 ? p / d : null)
 const calcPPD = (p, n, d) => (n > 0 && d > 0 ? p / (n * d) : null)
 
 // ── Inline Edit Cell ─────────────────────────────────────────────────────────
-function InlineEditCell({ value, onSave, type = 'text', style = {}, placeholder = '', decimals = 2, locale, editTooltip }) {
+function InlineEditCell({ value, onSave, type = 'text', style = {}, placeholder = '', decimals = 2, locale, editTooltip, readOnly = false }) {
   const [editing, setEditing] = useState(false)
   const [editValue, setEditValue] = useState(value ?? '')
   const inputRef = useRef(null)
@@ -71,12 +88,12 @@ function InlineEditCell({ value, onSave, type = 'text', style = {}, placeholder
     : (value || '')
 
   return (
-    <div onClick={() => { setEditValue(value ?? ''); setEditing(true) }} title={editTooltip}
-      style={{ cursor: 'pointer', padding: '4px 6px', borderRadius: 4, minHeight: 28, display: 'flex', alignItems: 'center',
+    <div onClick={() => { if (readOnly) return; setEditValue(value ?? ''); setEditing(true) }} title={readOnly ? undefined : editTooltip}
+      style={{ cursor: readOnly ? 'default' : 'pointer', padding: '2px 4px', borderRadius: 4, minHeight: 22, display: 'flex', alignItems: 'center',
         justifyContent: style?.textAlign === 'center' ? 'center' : 'flex-start', transition: 'background 0.15s',
         color: display ? 'var(--text-primary)' : 'var(--text-faint)', fontSize: 13, ...style }}
-      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+      onMouseEnter={e => { if (!readOnly) e.currentTarget.style.background = 'var(--bg-hover)' }}
+      onMouseLeave={e => { if (!readOnly) e.currentTarget.style.background = 'transparent' }}>
       {display || placeholder || '-'}
     </div>
   )
@@ -84,7 +101,7 @@ function InlineEditCell({ value, onSave, type = 'text', style = {}, placeholder
 
 // ── Add Item Row ─────────────────────────────────────────────────────────────
 interface AddItemRowProps {
-  onAdd: (data: { name: string; total_price: number; persons: number | null; days: number | null; note: string | null }) => void
+  onAdd: (data: { name: string; total_price: number; persons: number | null; days: number | null; note: string | null; expense_date: string | null }) => void
   t: (key: string) => string
 }
 
@@ -94,12 +111,13 @@ function AddItemRow({ onAdd, t }: AddItemRowProps) {
   const [persons, setPersons] = useState('')
   const [days, setDays] = useState('')
   const [note, setNote] = useState('')
+  const [expenseDate, setExpenseDate] = useState('')
   const nameRef = useRef(null)
 
   const handleAdd = () => {
     if (!name.trim()) return
-    onAdd({ name: name.trim(), total_price: parseFloat(String(price).replace(',', '.')) || 0, persons: parseInt(persons) || null, days: parseInt(days) || null, note: note.trim() || null })
-    setName(''); setPrice(''); setPersons(''); setDays(''); setNote('')
+    onAdd({ name: name.trim(), total_price: parseFloat(String(price).replace(',', '.')) || 0, persons: parseInt(persons) || null, days: parseInt(days) || null, note: note.trim() || null, expense_date: expenseDate || null })
+    setName(''); setPrice(''); setPersons(''); setDays(''); setNote(''); setExpenseDate('')
     setTimeout(() => nameRef.current?.focus(), 50)
   }
 
@@ -117,15 +135,20 @@ function AddItemRow({ onAdd, t }: AddItemRowProps) {
       </td>
       <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
         <input value={persons} onChange={e => setPersons(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
-          placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 50, margin: '0 auto' }} />
+          placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 60, margin: '0 auto' }} />
       </td>
       <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
         <input value={days} onChange={e => setDays(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
-          placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 50, margin: '0 auto' }} />
+          placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 60, margin: '0 auto' }} />
       </td>
       <td className="hidden md:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
       <td className="hidden md:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
       <td className="hidden lg:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
+      <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
+        <div style={{ maxWidth: 90, margin: '0 auto' }}>
+          <CustomDatePicker value={expenseDate} onChange={setExpenseDate} placeholder="-" compact />
+        </div>
+      </td>
       <td className="hidden sm:table-cell" style={{ padding: '4px 6px' }}>
         <input value={note} onChange={e => setNote(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()} placeholder={t('budget.table.note')} style={inp} />
       </td>
@@ -145,9 +168,11 @@ interface ChipWithTooltipProps {
   label: string
   avatarUrl: string | null
   size?: number
+  paid?: boolean
+  onClick?: () => void
 }
 
-function ChipWithTooltip({ label, avatarUrl, size = 20 }: ChipWithTooltipProps) {
+function ChipWithTooltip({ label, avatarUrl, size = 20, paid, onClick }: ChipWithTooltipProps) {
   const [hover, setHover] = useState(false)
   const [pos, setPos] = useState({ top: 0, left: 0 })
   const ref = useRef(null)
@@ -160,13 +185,19 @@ function ChipWithTooltip({ label, avatarUrl, size = 20 }: ChipWithTooltipProps)
     setHover(true)
   }
 
+  const borderColor = paid ? '#22c55e' : 'var(--border-primary)'
+  const bg = paid ? 'rgba(34,197,94,0.15)' : 'var(--bg-tertiary)'
+
   return (
     <>
       <div ref={ref} onMouseEnter={onEnter} onMouseLeave={() => setHover(false)}
+        onClick={onClick}
         style={{
-          width: size, height: size, borderRadius: '50%', border: '1.5px solid var(--border-primary)',
-          background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: size * 0.4, fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
+          width: size, height: size, borderRadius: '50%', border: `2px solid ${borderColor}`,
+          background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: size * 0.4, fontWeight: 700, color: paid ? '#16a34a' : 'var(--text-muted)',
+          overflow: 'hidden', flexShrink: 0, cursor: onClick ? 'pointer' : 'default',
+          transition: 'border-color 0.15s, background 0.15s',
         }}>
         {avatarUrl
           ? <img src={avatarUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
@@ -177,11 +208,19 @@ function ChipWithTooltip({ label, avatarUrl, size = 20 }: ChipWithTooltipProps)
         <div style={{
           position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
           pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
+          display: 'flex', alignItems: 'center', gap: 5,
           background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
           fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 8,
           boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint, #e5e7eb)',
         }}>
           {label}
+          {paid && (
+            <span style={{
+              fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 4,
+              background: 'rgba(34,197,94,0.15)', color: '#16a34a',
+              textTransform: 'uppercase', letterSpacing: '0.03em',
+            }}>Paid</span>
+          )}
         </div>,
         document.body
       )}
@@ -194,10 +233,12 @@ interface BudgetMemberChipsProps {
   members?: BudgetMember[]
   tripMembers?: TripMember[]
   onSetMembers: (memberIds: number[]) => void
+  onTogglePaid?: (userId: number, paid: boolean) => void
   compact?: boolean
+  readOnly?: boolean
 }
 
-function BudgetMemberChips({ members = [], tripMembers = [], onSetMembers, compact = true }: BudgetMemberChipsProps) {
+function BudgetMemberChips({ members = [], tripMembers = [], onSetMembers, onTogglePaid, compact = true, readOnly = false }: BudgetMemberChipsProps) {
   const chipSize = compact ? 20 : 30
   const btnSize = compact ? 18 : 28
   const iconSize = compact ? (members.length > 0 ? 8 : 9) : (members.length > 0 ? 12 : 14)
@@ -237,16 +278,21 @@ function BudgetMemberChips({ members = [], tripMembers = [], onSetMembers, compa
   return (
     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2, flexWrap: 'wrap' }}>
       {members.map(m => (
-        <ChipWithTooltip key={m.user_id} label={m.username} avatarUrl={m.avatar_url} size={chipSize} />
+        <ChipWithTooltip key={m.user_id} label={m.username} avatarUrl={m.avatar_url} size={chipSize}
+          paid={!!m.paid}
+          onClick={!readOnly && onTogglePaid ? () => onTogglePaid(m.user_id, !m.paid) : undefined}
+        />
       ))}
-      <button ref={btnRef} onClick={openDropdown}
-        style={{
-          width: btnSize, height: btnSize, borderRadius: '50%', border: '1.5px dashed var(--border-primary)',
-          background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          color: 'var(--text-faint)', padding: 0, flexShrink: 0,
-        }}>
-        {members.length > 0 ? <Pencil size={iconSize} /> : <Users size={iconSize} />}
-      </button>
+      {!readOnly && (
+        <button ref={btnRef} onClick={openDropdown}
+          style={{
+            width: btnSize, height: btnSize, borderRadius: '50%', border: '1.5px dashed var(--border-primary)',
+            background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            color: 'var(--text-faint)', padding: 0, flexShrink: 0,
+          }}>
+          {members.length > 0 ? <Pencil size={iconSize} /> : <Users size={iconSize} />}
+        </button>
+      )}
       {showDropdown && ReactDOM.createPortal(
         <div ref={dropRef} style={{
           position: 'fixed', top: dropPos.top, left: dropPos.left, transform: 'translateX(-50%)', zIndex: 10000,
@@ -376,15 +422,25 @@ interface BudgetPanelProps {
 }
 
 export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelProps) {
-  const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers } = useTripStore()
+  const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers, toggleBudgetMemberPaid } = useTripStore()
+  const can = useCanDo()
   const { t, locale } = useTranslation()
   const [newCategoryName, setNewCategoryName] = useState('')
   const [editingCat, setEditingCat] = useState(null) // { name, value }
+  const [settlement, setSettlement] = useState<{ balances: any[]; flows: any[] } | null>(null)
+  const [settlementOpen, setSettlementOpen] = useState(false)
   const currency = trip?.currency || 'EUR'
+  const canEdit = can('budget_edit', trip)
 
   const fmt = (v, cur) => fmtNum(v, locale, cur)
   const hasMultipleMembers = tripMembers.length > 1
 
+  // Load settlement data whenever budget items change
+  useEffect(() => {
+    if (!hasMultipleMembers) return
+    budgetApi.settlement(tripId).then(setSettlement).catch(() => {})
+  }, [tripId, budgetItems, hasMultipleMembers])
+
   const setCurrency = (cur) => {
     if (tripId) updateTrip(tripId, { currency: cur })
   }
@@ -427,6 +483,41 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
     setNewCategoryName('')
   }
 
+  const handleExportCsv = () => {
+    const sep = ';'
+    const esc = (v: any) => { const s = String(v ?? ''); return s.includes(sep) || s.includes('"') || s.includes('\n') ? '"' + s.replace(/"/g, '""') + '"' : s }
+    const d = currencyDecimals(currency)
+    const fmtPrice = (v: number | null | undefined) => v != null ? v.toFixed(d) : ''
+
+    const fmtDate = (iso: string) => { if (!iso) return ''; const d = new Date(iso + 'T00:00:00'); return d.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }) }
+    const header = ['Category', 'Name', 'Date', 'Total (' + currency + ')', 'Persons', 'Days', 'Per Person', 'Per Day', 'Per Person/Day', 'Note']
+    const rows = [header.join(sep)]
+
+    for (const cat of categoryNames) {
+      for (const item of (grouped[cat] || [])) {
+        const pp = calcPP(item.total_price, item.persons)
+        const pd = calcPD(item.total_price, item.days)
+        const ppd = calcPPD(item.total_price, item.persons, item.days)
+        rows.push([
+          esc(item.category), esc(item.name), esc(fmtDate(item.expense_date || '')),
+          fmtPrice(item.total_price), item.persons ?? '', item.days ?? '',
+          fmtPrice(pp), fmtPrice(pd), fmtPrice(ppd),
+          esc(item.note || ''),
+        ].join(sep))
+      }
+    }
+
+    const bom = '\uFEFF'
+    const blob = new Blob([bom + rows.join('\r\n')], { type: 'text/csv;charset=utf-8;' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    const safeName = (trip?.title || 'trip').replace(/[^a-zA-Z0-9\u00C0-\u024F _-]/g, '').trim()
+    a.download = `budget-${safeName}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
   const th = { padding: '6px 8px', textAlign: 'center', fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em', borderBottom: '2px solid var(--border-primary)', whiteSpace: 'nowrap', background: 'var(--bg-secondary)' }
   const td = { padding: '2px 6px', borderBottom: '1px solid var(--border-secondary)', fontSize: 13, verticalAlign: 'middle', color: 'var(--text-primary)' }
 
@@ -439,16 +530,18 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
         </div>
         <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>{t('budget.emptyTitle')}</h2>
         <p style={{ fontSize: 14, color: 'var(--text-muted)', margin: '0 0 24px', lineHeight: 1.5 }}>{t('budget.emptyText')}</p>
-        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', alignItems: 'stretch', maxWidth: 320, margin: '0 auto' }}>
-          <input value={newCategoryName} onChange={e => setNewCategoryName(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleAddCategory()}
-            placeholder={t('budget.emptyPlaceholder')}
-            style={{ flex: 1, padding: '9px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', minWidth: 0 }} />
-          <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
-            style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '0 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.5, flexShrink: 0 }}>
-            <Plus size={16} />
-          </button>
-        </div>
+        {canEdit && (
+          <div style={{ display: 'flex', gap: 6, justifyContent: 'center', alignItems: 'stretch', maxWidth: 320, margin: '0 auto' }}>
+            <input value={newCategoryName} onChange={e => setNewCategoryName(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && handleAddCategory()}
+              placeholder={t('budget.emptyPlaceholder')}
+              style={{ flex: 1, padding: '9px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', minWidth: 0 }} />
+            <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
+              style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '0 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.5, flexShrink: 0 }}>
+              <Plus size={16} />
+            </button>
+          </div>
+        )}
       </div>
     )
   }
@@ -461,6 +554,10 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
           <Calculator size={20} color="var(--text-primary)" />
           <h2 style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('budget.title')}</h2>
         </div>
+        <button onClick={handleExportCsv} title={t('budget.exportCsv')}
+          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-muted)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
+          <Download size={13} /> CSV
+        </button>
       </div>
 
       <div style={{ display: 'flex', gap: 20, padding: '0 16px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
@@ -475,7 +572,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#000000', color: '#fff', borderRadius: '10px 10px 0 0', padding: '9px 14px' }}>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
                     <div style={{ width: 10, height: 10, borderRadius: 3, background: color, flexShrink: 0 }} />
-                    {editingCat?.name === cat ? (
+                    {canEdit && editingCat?.name === cat ? (
                       <input
                         autoFocus
                         value={editingCat.value}
@@ -487,21 +584,25 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                     ) : (
                       <>
                         <span style={{ fontWeight: 600, fontSize: 13 }}>{cat}</span>
-                        <button onClick={() => setEditingCat({ name: cat, value: cat })}
-                          style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.4)', display: 'flex', padding: 1 }}
-                          onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.4)'}>
-                          <Pencil size={10} />
-                        </button>
+                        {canEdit && (
+                          <button onClick={() => setEditingCat({ name: cat, value: cat })}
+                            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.4)', display: 'flex', padding: 1 }}
+                            onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.4)'}>
+                            <Pencil size={10} />
+                          </button>
+                        )}
                       </>
                     )}
                   </div>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                     <span style={{ fontSize: 13, fontWeight: 500, opacity: 0.9 }}>{fmt(subtotal, currency)}</span>
-                    <button onClick={() => handleDeleteCategory(cat)} title={t('budget.deleteCategory')}
-                      style={{ background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 4, color: '#fff', cursor: 'pointer', padding: '3px 6px', display: 'flex', alignItems: 'center', opacity: 0.6 }}
-                      onMouseEnter={e => e.currentTarget.style.opacity = '1'} onMouseLeave={e => e.currentTarget.style.opacity = '0.6'}>
-                      <Trash2 size={13} />
-                    </button>
+                    {canEdit && (
+                      <button onClick={() => handleDeleteCategory(cat)} title={t('budget.deleteCategory')}
+                        style={{ background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 4, color: '#fff', cursor: 'pointer', padding: '3px 6px', display: 'flex', alignItems: 'center', opacity: 0.6 }}
+                        onMouseEnter={e => e.currentTarget.style.opacity = '1'} onMouseLeave={e => e.currentTarget.style.opacity = '0.6'}>
+                        <Trash2 size={13} />
+                      </button>
+                    )}
                   </div>
                 </div>
 
@@ -509,14 +610,15 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                   <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                     <thead>
                       <tr>
-                        <th style={{ ...th, textAlign: 'left', minWidth: 100 }}>{t('budget.table.name')}</th>
-                        <th style={{ ...th, minWidth: 60 }}>{t('budget.table.total')}</th>
-                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 130 }}>{t('budget.table.persons')}</th>
-                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 45 }}>{t('budget.table.days')}</th>
-                        <th className="hidden md:table-cell" style={{ ...th, minWidth: 90 }}>{t('budget.table.perPerson')}</th>
-                        <th className="hidden md:table-cell" style={{ ...th, minWidth: 80 }}>{t('budget.table.perDay')}</th>
+                        <th style={{ ...th, textAlign: 'left', minWidth: 120 }}>{t('budget.table.name')}</th>
+                        <th style={{ ...th, minWidth: 75 }}>{t('budget.table.total')}</th>
+                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 160 }}>{t('budget.table.persons')}</th>
+                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 55 }}>{t('budget.table.days')}</th>
+                        <th className="hidden md:table-cell" style={{ ...th, minWidth: 100 }}>{t('budget.table.perPerson')}</th>
+                        <th className="hidden md:table-cell" style={{ ...th, minWidth: 90 }}>{t('budget.table.perDay')}</th>
                         <th className="hidden lg:table-cell" style={{ ...th, minWidth: 95 }}>{t('budget.table.perPersonDay')}</th>
-                        <th className="hidden sm:table-cell" style={{ ...th, textAlign: 'left', minWidth: 80 }}>{t('budget.table.note')}</th>
+                        <th className="hidden sm:table-cell" style={{ ...th, width: 90, maxWidth: 90 }}>{t('budget.table.date')}</th>
+                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 150 }}>{t('budget.table.note')}</th>
                         <th style={{ ...th, width: 36 }}></th>
                       </tr>
                     </thead>
@@ -531,7 +633,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                             onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
                             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                             <td style={td}>
-                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={t('budget.editTooltip')} />
+                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
                               {/* Mobile: larger chips under name since Persons column is hidden */}
                               {hasMultipleMembers && (
                                 <div className="sm:hidden" style={{ marginTop: 4 }}>
@@ -539,13 +641,15 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                                     members={item.members || []}
                                     tripMembers={tripMembers}
                                     onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
+                                    onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
                                     compact={false}
+                                    readOnly={!canEdit}
                                   />
                                 </div>
                               )}
                             </td>
                             <td style={{ ...td, textAlign: 'center' }}>
-                              <InlineEditCell value={item.total_price} type="number" decimals={currencyDecimals(currency)} onSave={v => handleUpdateField(item.id, 'total_price', v)} style={{ textAlign: 'center' }} placeholder={currencyDecimals(currency) === 0 ? '0' : '0,00'} locale={locale} editTooltip={t('budget.editTooltip')} />
+                              <InlineEditCell value={item.total_price} type="number" decimals={currencyDecimals(currency)} onSave={v => handleUpdateField(item.id, 'total_price', v)} style={{ textAlign: 'center' }} placeholder={currencyDecimals(currency) === 0 ? '0' : '0,00'} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
                             </td>
                             <td className="hidden sm:table-cell" style={{ ...td, textAlign: 'center', position: 'relative' }}>
                               {hasMultipleMembers ? (
@@ -553,29 +657,42 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                                   members={item.members || []}
                                   tripMembers={tripMembers}
                                   onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
+                                  onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
+                                  readOnly={!canEdit}
                                 />
                               ) : (
-                                <InlineEditCell value={item.persons} type="number" decimals={0} onSave={v => handleUpdateField(item.id, 'persons', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} />
+                                <InlineEditCell value={item.persons} type="number" decimals={0} onSave={v => handleUpdateField(item.id, 'persons', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
                               )}
                             </td>
                             <td className="hidden sm:table-cell" style={{ ...td, textAlign: 'center' }}>
-                              <InlineEditCell value={item.days} type="number" decimals={0} onSave={v => handleUpdateField(item.id, 'days', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} />
+                              <InlineEditCell value={item.days} type="number" decimals={0} onSave={v => handleUpdateField(item.id, 'days', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
                             </td>
                             <td className="hidden md:table-cell" style={{ ...td, textAlign: 'center', color: pp != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{pp != null ? fmt(pp, currency) : '-'}</td>
                             <td className="hidden md:table-cell" style={{ ...td, textAlign: 'center', color: pd != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{pd != null ? fmt(pd, currency) : '-'}</td>
                             <td className="hidden lg:table-cell" style={{ ...td, textAlign: 'center', color: ppd != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{ppd != null ? fmt(ppd, currency) : '-'}</td>
-                            <td className="hidden sm:table-cell" style={td}><InlineEditCell value={item.note} onSave={v => handleUpdateField(item.id, 'note', v)} placeholder={t('budget.table.note')} locale={locale} editTooltip={t('budget.editTooltip')} /></td>
+                            <td className="hidden sm:table-cell" style={{ ...td, padding: '2px 6px', width: 90, maxWidth: 90, textAlign: 'center' }}>
+                              {canEdit ? (
+                                <div style={{ maxWidth: 90, margin: '0 auto' }}>
+                                  <CustomDatePicker value={item.expense_date || ''} onChange={v => handleUpdateField(item.id, 'expense_date', v || null)} placeholder="—" compact borderless />
+                                </div>
+                              ) : (
+                                <span style={{ fontSize: 11, color: item.expense_date ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{item.expense_date || '—'}</span>
+                              )}
+                            </td>
+                            <td className="hidden sm:table-cell" style={td}><InlineEditCell value={item.note} onSave={v => handleUpdateField(item.id, 'note', v)} placeholder={t('budget.table.note')} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} /></td>
                             <td style={{ ...td, textAlign: 'center' }}>
+                              {canEdit && (
                               <button onClick={() => handleDeleteItem(item.id)} title={t('common.delete')}
                                 style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, color: 'var(--text-faint)', borderRadius: 4, display: 'inline-flex', transition: 'color 0.15s' }}
                                 onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = '#d1d5db'}>
                                 <Trash2 size={14} />
                               </button>
+                              )}
                             </td>
                           </tr>
                         )
                       })}
-                      <AddItemRow onAdd={data => handleAddItem(cat, data)} t={t} />
+                      {canEdit && <AddItemRow onAdd={data => handleAddItem(cat, data)} t={t} />}
                     </tbody>
                   </table>
                 </div>
@@ -584,29 +701,32 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
           })}
         </div>
 
-        <div className="w-full md:w-[280px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
+        <div className="w-full md:w-[180px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
           <div style={{ marginBottom: 12 }}>
             <CustomSelect
               value={currency}
               onChange={setCurrency}
+              disabled={!canEdit}
               options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
               searchable
             />
           </div>
 
-          <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
-            <input
-              value={newCategoryName}
-              onChange={e => setNewCategoryName(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
-              placeholder={t('budget.categoryName')}
-              style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-input)', color: 'var(--text-primary)' }}
-            />
-            <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
-              style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '9px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.4, flexShrink: 0 }}>
-              <Plus size={16} />
-            </button>
-          </div>
+          {canEdit && (
+            <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
+              <input
+                value={newCategoryName}
+                onChange={e => setNewCategoryName(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
+                placeholder={t('budget.categoryName')}
+                style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-input)', color: 'var(--text-primary)' }}
+              />
+              <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
+                style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '9px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.4, flexShrink: 0 }}>
+                <Plus size={16} />
+              </button>
+            </div>
+          )}
 
           <div style={{
             background: 'linear-gradient(135deg, #000000 0%, #18181b 100%)',
@@ -621,13 +741,98 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                 <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: 0.5 }}>{t('budget.totalBudget')}</div>
               </div>
             </div>
-            <div style={{ fontSize: 28, fontWeight: 700, lineHeight: 1, marginBottom: 4 }}>
+            <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, marginBottom: 4 }}>
               {Number(grandTotal).toLocaleString(locale, { minimumFractionDigits: currencyDecimals(currency), maximumFractionDigits: currencyDecimals(currency) })}
             </div>
             <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>{SYMBOLS[currency] || currency} {currency}</div>
             {hasMultipleMembers && (budgetItems || []).some(i => i.members?.length > 0) && (
               <PerPersonInline tripId={tripId} budgetItems={budgetItems} currency={currency} locale={locale} />
             )}
+
+            {/* Settlement dropdown inside the total card */}
+            {hasMultipleMembers && settlement && settlement.flows.length > 0 && (
+              <div style={{ marginTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 12 }}>
+                <button onClick={() => setSettlementOpen(v => !v)} style={{
+                  display: 'flex', alignItems: 'center', gap: 6, width: '100%',
+                  background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit',
+                  color: 'rgba(255,255,255,0.6)', fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
+                }}>
+                  {settlementOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
+                  {t('budget.settlement')}
+                  <span style={{ position: 'relative', display: 'inline-flex', marginLeft: 2 }}>
+                    <span style={{ display: 'flex', cursor: 'help' }}
+                      onMouseEnter={e => { const tip = e.currentTarget.nextElementSibling as HTMLElement; if (tip) tip.style.display = 'block' }}
+                      onMouseLeave={e => { const tip = e.currentTarget.nextElementSibling as HTMLElement; if (tip) tip.style.display = 'none' }}
+                      onClick={e => e.stopPropagation()}
+                    >
+                      <Info size={11} strokeWidth={2} />
+                    </span>
+                    <div style={{
+                      display: 'none', position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
+                      marginTop: 6, width: 220, padding: '10px 12px', borderRadius: 10, zIndex: 100,
+                      background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
+                      boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
+                      fontSize: 11, fontWeight: 400, color: 'var(--text-secondary)', lineHeight: 1.5, textAlign: 'left',
+                    }}>
+                      {t('budget.settlementInfo')}
+                    </div>
+                  </span>
+                </button>
+
+                {settlementOpen && (
+                  <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    {settlement.flows.map((flow, i) => (
+                      <div key={i} style={{
+                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
+                        padding: '8px 10px', borderRadius: 10,
+                        background: 'rgba(255,255,255,0.06)',
+                      }}>
+                        <ChipWithTooltip label={flow.from.username} avatarUrl={flow.from.avatar_url} size={28} />
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>→</span>
+                          <span style={{ fontSize: 12, fontWeight: 700, color: '#f87171', whiteSpace: 'nowrap' }}>
+                            {fmt(flow.amount, currency)}
+                          </span>
+                          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>→</span>
+                        </div>
+                        <ChipWithTooltip label={flow.to.username} avatarUrl={flow.to.avatar_url} size={28} />
+                      </div>
+                    ))}
+
+                    {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).length > 0 && (
+                      <div style={{ marginTop: 4, borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 8 }}>
+                        <div style={{ fontSize: 9, fontWeight: 600, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
+                          {t('budget.netBalances')}
+                        </div>
+                        {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).map(b => (
+                          <div key={b.user_id} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0' }}>
+                            <div style={{
+                              width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
+                              background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                              fontSize: 8, fontWeight: 700, color: 'rgba(255,255,255,0.6)', overflow: 'hidden',
+                            }}>
+                              {b.avatar_url
+                                ? <img src={b.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                : b.username?.[0]?.toUpperCase()
+                              }
+                            </div>
+                            <span style={{ flex: 1, fontSize: 11, color: 'rgba(255,255,255,0.6)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                              {b.username}
+                            </span>
+                            <span style={{
+                              fontSize: 11, fontWeight: 600, flexShrink: 0,
+                              color: b.balance > 0 ? '#4ade80' : '#f87171',
+                            }}>
+                              {b.balance > 0 ? '+' : ''}{fmt(b.balance, currency)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
           </div>
 
           {pieSegments.length > 0 && (
@@ -641,27 +846,19 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
 
               <PieChart segments={pieSegments} size={180} totalLabel={t('budget.total')} />
 
-              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
                 {pieSegments.map(seg => {
                   const pct = grandTotal > 0 ? ((seg.value / grandTotal) * 100).toFixed(1) : '0.0'
                   return (
                     <div key={seg.name} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                       <div style={{ width: 10, height: 10, borderRadius: 3, background: seg.color, flexShrink: 0 }} />
                       <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{seg.name}</span>
-                      <span style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 600, whiteSpace: 'nowrap' }}>{pct}%</span>
+                      <span style={{ fontSize: 11, color: 'var(--text-faint)', fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(seg.value, currency)}</span>
+                      <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600, whiteSpace: 'nowrap', minWidth: 38, textAlign: 'right' }}>{pct}%</span>
                     </div>
                   )
                 })}
               </div>
-
-              <div style={{ marginTop: 12, borderTop: '1px solid var(--border-secondary)', paddingTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
-                {pieSegments.map(seg => (
-                  <div key={seg.name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                    <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{seg.name}</span>
-                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>{fmt(seg.value, currency)}</span>
-                  </div>
-                ))}
-              </div>
             </div>
           )}
 

client/src/components/Collab/CollabChat.tsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom'
 import { ArrowUp, Trash2, Reply, ChevronUp, MessageCircle, Smile, X } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { useSettingsStore } from '../../store/settingsStore'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import type { User } from '../../types'
@@ -353,6 +355,9 @@ interface CollabChatProps {
 export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
   const { t } = useTranslation()
   const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
+  const canEdit = can('collab_edit', trip)
 
   const [messages, setMessages] = useState([])
   const [loading, setLoading] = useState(true)
@@ -636,11 +641,11 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
                       style={{ position: 'relative' }}
                       onMouseEnter={() => setHoveredId(msg.id)}
                       onMouseLeave={() => setHoveredId(null)}
-                      onContextMenu={e => { e.preventDefault(); setReactMenu({ msgId: msg.id, x: e.clientX, y: e.clientY }) }}
+                      onContextMenu={e => { e.preventDefault(); if (canEdit) setReactMenu({ msgId: msg.id, x: e.clientX, y: e.clientY }) }}
                       onTouchEnd={e => {
                         const now = Date.now()
                         const lastTap = e.currentTarget.dataset.lastTap || 0
-                        if (now - lastTap < 300) {
+                        if (now - lastTap < 300 && canEdit) {
                           e.preventDefault()
                           const touch = e.changedTouches?.[0]
                           if (touch) setReactMenu({ msgId: msg.id, x: touch.clientX, y: touch.clientY })
@@ -692,7 +697,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
                         transition: 'opacity .1s',
                         ...(own ? { left: -6 } : { right: -6 }),
                       }}>
-                        <button onClick={() => setReplyTo(msg)} title="Reply" style={{
+                        <button onClick={() => setReplyTo(msg)} title={t('collab.chat.reply')} style={{
                           width: 24, height: 24, borderRadius: '50%', border: 'none',
                           background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                           cursor: 'pointer', color: 'var(--accent-text)', padding: 0,
@@ -703,8 +708,8 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
                         >
                           <Reply size={11} />
                         </button>
-                        {own && (
-                          <button onClick={() => handleDelete(msg.id)} title="Delete" style={{
+                        {own && canEdit && (
+                          <button onClick={() => handleDelete(msg.id)} title={t('common.delete')} style={{
                             width: 24, height: 24, borderRadius: '50%', border: 'none',
                             background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                             cursor: 'pointer', color: 'var(--accent-text)', padding: 0,
@@ -735,7 +740,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
                           {msg.reactions.map(r => {
                             const myReaction = r.users.some(u => String(u.user_id) === String(currentUser.id))
                             return (
-                              <ReactionBadge key={r.emoji} reaction={r} currentUserId={currentUser.id} onReact={() => handleReact(msg.id, r.emoji)} />
+                              <ReactionBadge key={r.emoji} reaction={r} currentUserId={currentUser.id} onReact={() => { if (canEdit) handleReact(msg.id, r.emoji) }} />
                             )
                           })}
                         </div>
@@ -780,23 +785,27 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
 
         <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
           {/* Emoji button */}
-          <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
-            width: 34, height: 34, borderRadius: '50%', border: 'none',
-            background: showEmoji ? 'var(--bg-hover)' : 'transparent',
-            color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
-          }}>
-            <Smile size={20} />
-          </button>
+          {canEdit && (
+            <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
+              width: 34, height: 34, borderRadius: '50%', border: 'none',
+              background: showEmoji ? 'var(--bg-hover)' : 'transparent',
+              color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
+            }}>
+              <Smile size={20} />
+            </button>
+          )}
 
           <textarea
             ref={textareaRef}
             rows={1}
+            disabled={!canEdit}
             style={{
               flex: 1, resize: 'none', border: '1px solid var(--border-primary)', borderRadius: 20,
               padding: '8px 14px', fontSize: 14, lineHeight: 1.4, fontFamily: 'inherit',
               background: 'var(--bg-input)', color: 'var(--text-primary)', outline: 'none',
               maxHeight: 100, overflowY: 'hidden',
+              opacity: canEdit ? 1 : 0.5,
             }}
             placeholder={t('collab.chat.placeholder')}
             value={text}
@@ -805,15 +814,17 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
           />
 
           {/* Send */}
-          <button onClick={handleSend} disabled={!text.trim() || sending} style={{
-            width: 34, height: 34, borderRadius: '50%', border: 'none',
-            background: text.trim() ? '#007AFF' : 'var(--border-primary)',
-            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
-            transition: 'background 0.15s',
-          }}>
-            <ArrowUp size={18} strokeWidth={2.5} />
-          </button>
+          {canEdit && (
+            <button onClick={handleSend} disabled={!text.trim() || sending} style={{
+              width: 34, height: 34, borderRadius: '50%', border: 'none',
+              background: text.trim() ? '#007AFF' : 'var(--border-primary)',
+              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
+              transition: 'background 0.15s',
+            }}>
+              <ArrowUp size={18} strokeWidth={2.5} />
+            </button>
+          )}
         </div>
       </div>
 

client/src/components/Collab/CollabNotes.tsx

@@ -5,6 +5,8 @@ import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Plus, Trash2, Pin, PinOff, Pencil, X, Check, StickyNote, Settings, ExternalLink, Maximize2 } from 'lucide-react'
 import { collabApi } from '../../api/client'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import type { User } from '../../types'
@@ -216,7 +218,7 @@ function UserAvatar({ user, size = 14 }: UserAvatarProps) {
 interface NoteFormModalProps {
   onClose: () => void
   onSubmit: (data: { title: string; content: string; category: string; website: string; files?: File[] }) => Promise<void>
-  onDeleteFile: (noteId: number, fileId: number) => Promise<void>
+  onDeleteFile?: (noteId: number, fileId: number) => Promise<void>
   existingCategories: string[]
   categoryColors: Record<string, string>
   getCategoryColor: (category: string) => string
@@ -226,6 +228,9 @@ interface NoteFormModalProps {
 }
 
 function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, categoryColors, getCategoryColor, note, tripId, t }: NoteFormModalProps) {
+  const can = useCanDo()
+  const tripObj = useTripStore((s) => s.trip)
+  const canUploadFiles = can('file_upload', tripObj)
   const isEdit = !!note
   const allCategories = [...new Set([...existingCategories, ...Object.keys(categoryColors || {})])].filter(Boolean)
 
@@ -298,6 +303,7 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
         }}
         onClick={e => e.stopPropagation()}
         onPaste={e => {
+          if (!canUploadFiles) return
           const items = e.clipboardData?.items
           if (!items) return
           for (const item of Array.from(items)) {
@@ -450,7 +456,7 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
           </div>
 
           {/* File attachments */}
-          <div>
+          {canUploadFiles && <div>
             <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4, fontFamily: FONT }}>
               {t('collab.notes.attachFiles')}
             </div>
@@ -483,7 +489,7 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
                 <Plus size={11} /> {t('files.attach') || 'Add'}
               </label>
             </div>
-          </div>
+          </div>}
 
           {/* Submit */}
           <button
@@ -689,6 +695,7 @@ function CategorySettingsModal({ onClose, categories, categoryColors, onSave, on
 interface NoteCardProps {
   note: CollabNote
   currentUser: User
+  canEdit: boolean
   onUpdate: (noteId: number, data: Partial<CollabNote>) => Promise<void>
   onDelete: (noteId: number) => Promise<void>
   onEdit: (note: CollabNote) => void
@@ -699,7 +706,7 @@ interface NoteCardProps {
   t: (key: string) => string
 }
 
-function NoteCard({ note, currentUser, onUpdate, onDelete, onEdit, onView, onPreviewFile, getCategoryColor, tripId, t }: NoteCardProps) {
+function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdit, onView, onPreviewFile, getCategoryColor, tripId, t }: NoteCardProps) {
   const [hovered, setHovered] = useState(false)
 
   const author = note.author || note.user || { username: note.username, avatar: note.avatar_url || (note.avatar ? `/uploads/avatars/${note.avatar}` : null) }
@@ -760,24 +767,24 @@ function NoteCard({ note, currentUser, onUpdate, onDelete, onEdit, onView, onPre
                 <Maximize2 size={10} />
               </button>
             )}
-            <button onClick={handleTogglePin} title={note.pinned ? t('collab.notes.unpin') : t('collab.notes.pin')}
+            {canEdit && <button onClick={handleTogglePin} title={note.pinned ? t('collab.notes.unpin') : t('collab.notes.pin')}
               style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
               onMouseEnter={e => e.currentTarget.style.color = color}
               onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
               {note.pinned ? <PinOff size={10} /> : <Pin size={10} />}
-            </button>
-            <button onClick={() => onEdit?.(note)} title={t('collab.notes.edit')}
+            </button>}
+            {canEdit && <button onClick={() => onEdit?.(note)} title={t('collab.notes.edit')}
               style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
               onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
               onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
               <Pencil size={10} />
-            </button>
-            <button onClick={handleDelete} title={t('collab.notes.delete')}
+            </button>}
+            {canEdit && <button onClick={handleDelete} title={t('collab.notes.delete')}
               style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
               onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
               onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
               <Trash2 size={10} />
-            </button>
+            </button>}
             <div style={{ width: 1, height: 12, background: 'var(--border-faint)', flexShrink: 0, marginLeft: 1, marginRight: 1 }} />
             {/* Author avatar */}
             <div style={{ position: 'relative', flexShrink: 0 }}
@@ -879,6 +886,9 @@ interface CollabNotesProps {
 
 export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
   const { t } = useTranslation()
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
+  const canEdit = can('collab_edit', trip)
   const [notes, setNotes] = useState([])
   const [loading, setLoading] = useState(true)
   const [showNewModal, setShowNewModal] = useState(false)
@@ -1124,17 +1134,17 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
           {t('collab.notes.title')}
         </h3>
         <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-          <button onClick={() => setShowSettings(true)} title={t('collab.notes.categorySettings') || 'Categories'}
+          {canEdit && <button onClick={() => setShowSettings(true)} title={t('collab.notes.categorySettings') || 'Categories'}
             style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', transition: 'color 0.12s' }}
             onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
             onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
             <Settings size={14} />
-          </button>
-          <button onClick={() => setShowNewModal(true)}
+          </button>}
+          {canEdit && <button onClick={() => setShowNewModal(true)}
             style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
             <Plus size={12} />
             {t('collab.notes.new')}
-          </button>
+          </button>}
         </div>
       </div>
 
@@ -1252,6 +1262,7 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
                 key={note.id}
                 note={note}
                 currentUser={currentUser}
+                canEdit={canEdit}
                 onUpdate={handleUpdateNote}
                 onDelete={handleDeleteNote}
                 onEdit={setEditingNote}
@@ -1303,12 +1314,12 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
                 )}
               </div>
               <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-                <button onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
+                {canEdit && <button onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
                   style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
                   onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
                   onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                   <Pencil size={16} />
-                </button>
+                </button>}
                 <button onClick={() => setViewingNote(null)}
                   style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
                   onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
@@ -1327,6 +1338,8 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
 
       {showNewModal && (
         <NoteFormModal
+          note={null}
+          tripId={tripId}
           onClose={() => setShowNewModal(false)}
           onSubmit={handleCreateNote}
           existingCategories={categories}

client/src/components/Collab/CollabPolls.tsx

@@ -3,6 +3,8 @@ import { Plus, Trash2, X, Check, BarChart3, Lock, Clock } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
 import ReactDOM from 'react-dom'
 import type { User } from '../../types'
 
@@ -190,13 +192,14 @@ function VoterChip({ voter, offset }: VoterChipProps) {
 interface PollCardProps {
   poll: Poll
   currentUser: User
+  canEdit: boolean
   onVote: (pollId: number, optionId: number) => Promise<void>
   onClose: (pollId: number) => Promise<void>
   onDelete: (pollId: number) => Promise<void>
   t: (key: string) => string
 }
 
-function PollCard({ poll, currentUser, onVote, onClose, onDelete, t }: PollCardProps) {
+function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }: PollCardProps) {
   const total = totalVotes(poll)
   const isClosed = poll.is_closed || isExpired(poll.deadline)
   const remaining = timeRemaining(poll.deadline)
@@ -238,22 +241,24 @@ function PollCard({ poll, currentUser, onVote, onClose, onDelete, t }: PollCardP
           </div>
         </div>
         {/* Actions */}
-        <div style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
-          {!isClosed && (
-            <button onClick={() => onClose(poll.id)} title={t('collab.polls.close')}
+        {canEdit && (
+          <div style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
+            {!isClosed && (
+              <button onClick={() => onClose(poll.id)} title={t('collab.polls.close')}
+                style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
+                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <Lock size={12} />
+              </button>
+            )}
+            <button onClick={() => onDelete(poll.id)} title={t('collab.polls.delete')}
               style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
               onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Lock size={12} />
+              <Trash2 size={12} />
             </button>
-          )}
-          <button onClick={() => onDelete(poll.id)} title={t('collab.polls.delete')}
-            style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-            onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-            <Trash2 size={12} />
-          </button>
-        </div>
+          </div>
+        )}
       </div>
 
       {/* Options */}
@@ -337,6 +342,9 @@ interface CollabPollsProps {
 
 export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
   const { t } = useTranslation()
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
+  const canEdit = can('collab_edit', trip)
   const [polls, setPolls] = useState([])
   const [loading, setLoading] = useState(true)
   const [showForm, setShowForm] = useState(false)
@@ -426,13 +434,15 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
           <BarChart3 size={14} color="var(--text-faint)" />
           {t('collab.polls.title')}
         </h3>
-        <button onClick={() => setShowForm(true)} style={{
-          display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
-          background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600,
-          fontFamily: FONT, border: 'none', cursor: 'pointer',
-        }}>
-          <Plus size={12} /> {t('collab.polls.new')}
-        </button>
+        {canEdit && (
+          <button onClick={() => setShowForm(true)} style={{
+            display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
+            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600,
+            fontFamily: FONT, border: 'none', cursor: 'pointer',
+          }}>
+            <Plus size={12} /> {t('collab.polls.new')}
+          </button>
+        )}
       </div>
 
       {/* Content */}
@@ -446,7 +456,7 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
             {activePolls.length > 0 && activePolls.map(poll => (
-              <PollCard key={poll.id} poll={poll} currentUser={currentUser} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
+              <PollCard key={poll.id} poll={poll} currentUser={currentUser} canEdit={canEdit} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
             ))}
             {closedPolls.length > 0 && (
               <>
@@ -456,7 +466,7 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
                   </div>
                 )}
                 {closedPolls.map(poll => (
-                  <PollCard key={poll.id} poll={poll} currentUser={currentUser} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
+                  <PollCard key={poll.id} poll={poll} currentUser={currentUser} canEdit={canEdit} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
                 ))}
               </>
             )}

client/src/components/Dashboard/CurrencyWidget.tsx

@@ -4,17 +4,23 @@ import { useTranslation } from '../../i18n'
 import CustomSelect from '../shared/CustomSelect'
 
 const CURRENCIES = [
-  'EUR','USD','GBP','JPY','CHF','CAD','AUD','NZD','CNY','HKD',
-  'SGD','THB','TRY','SEK','NOK','DKK','PLN','CZK','HUF','RON',
-  'BGN','HRK','ISK','RUB','UAH','BRL','MXN','ARS','CLP','COP',
-  'INR','IDR','MYR','PHP','KRW','TWD','VND','ZAR','EGP','MAD',
-  'NGN','KES','AED','SAR','QAR','KWD','BHD','OMR','ILS',
+  'AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'AUD', 'AWG', 'AZN', 'BAM', 'BBD', 'BDT', 'BGN', 'BHD',
+  'BIF', 'BMD', 'BND', 'BOB', 'BRL', 'BSD', 'BTN', 'BWP', 'BYN', 'BZD', 'CAD', 'CDF', 'CHF', 'CLF', 'CLP',
+  'CNH', 'CNY', 'COP', 'CRC', 'CUP', 'CVE', 'CZK', 'DJF', 'DKK', 'DOP', 'DZD', 'EGP', 'ERN', 'ETB', 'EUR',
+  'FJD', 'FKP', 'FOK', 'GBP', 'GEL', 'GGP', 'GHS', 'GIP', 'GMD', 'GNF', 'GTQ', 'GYD', 'HKD', 'HNL', 'HRK',
+  'HTG', 'HUF', 'IDR', 'ILS', 'IMP', 'INR', 'IQD', 'ISK', 'JEP', 'JMD', 'JOD', 'JPY', 'KES', 'KGS', 'KHR',
+  'KID', 'KMF', 'KRW', 'KWD', 'KYD', 'KZT', 'LAK', 'LBP', 'LKR', 'LRD', 'LSL', 'LYD', 'MAD', 'MDL', 'MGA',
+  'MKD', 'MMK', 'MNT', 'MOP', 'MRU', 'MUR', 'MVR', 'MWK', 'MXN', 'MYR', 'MZN', 'NAD', 'NGN', 'NIO', 'NOK',
+  'NPR', 'NZD', 'OMR', 'PAB', 'PEN', 'PGK', 'PHP', 'PKR', 'PLN', 'PYG', 'QAR', 'RON', 'RSD', 'RUB', 'RWF',
+  'SAR', 'SBD', 'SCR', 'SDG', 'SEK', 'SGD', 'SHP', 'SLE', 'SOS', 'SRD', 'SSP', 'STN', 'SYP', 'SZL', 'THB',
+  'TJS', 'TMT', 'TND', 'TOP', 'TRY', 'TTD', 'TVD', 'TWD', 'TZS', 'UAH', 'UGX', 'USD', 'UYU', 'UZS', 'VES',
+  'VND', 'VUV', 'WST', 'XAF', 'XCD', 'XDR', 'XOF', 'XPF', 'YER', 'ZAR', 'ZMW', 'ZWL'
 ]
 
 const CURRENCY_OPTIONS = CURRENCIES.map(c => ({ value: c, label: c }))
 
 export default function CurrencyWidget() {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
   const [from, setFrom] = useState(() => localStorage.getItem('currency_from') || 'EUR')
   const [to, setTo] = useState(() => localStorage.getItem('currency_to') || 'USD')
   const [amount, setAmount] = useState('100')
@@ -40,7 +46,7 @@ export default function CurrencyWidget() {
   const rawResult = rate && amount ? (parseFloat(amount) * rate).toFixed(2) : null
   const formatNumber = (num) => {
     if (!num || num === '—') return '—'
-    return parseFloat(num).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+    return parseFloat(num).toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
   }
   const result = rawResult
 

client/src/components/Dashboard/TimezoneWidget.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Clock, Plus, X } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../store/settingsStore'
 
 const POPULAR_ZONES = [
   { label: 'New York', tz: 'America/New_York' },
@@ -23,9 +24,9 @@ const POPULAR_ZONES = [
   { label: 'Cairo', tz: 'Africa/Cairo' },
 ]
 
-function getTime(tz) {
+function getTime(tz, locale, is12h) {
   try {
-    return new Date().toLocaleTimeString('de-DE', { timeZone: tz, hour: '2-digit', minute: '2-digit' })
+    return new Date().toLocaleTimeString(locale, { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: is12h })
   } catch { return '—' }
 }
 
@@ -41,7 +42,8 @@ function getOffset(tz) {
 }
 
 export default function TimezoneWidget() {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
   const [zones, setZones] = useState(() => {
     const saved = localStorage.getItem('dashboard_timezones')
     return saved ? JSON.parse(saved) : [
@@ -51,6 +53,9 @@ export default function TimezoneWidget() {
   })
   const [now, setNow] = useState(Date.now())
   const [showAdd, setShowAdd] = useState(false)
+  const [customLabel, setCustomLabel] = useState('')
+  const [customTz, setCustomTz] = useState('')
+  const [customError, setCustomError] = useState('')
 
   useEffect(() => {
     const i = setInterval(() => setNow(Date.now()), 10000)
@@ -61,6 +66,20 @@ export default function TimezoneWidget() {
     localStorage.setItem('dashboard_timezones', JSON.stringify(zones))
   }, [zones])
 
+  const isValidTz = (tz: string) => {
+    try { Intl.DateTimeFormat('en-US', { timeZone: tz }).format(new Date()); return true } catch { return false }
+  }
+
+  const addCustomZone = () => {
+    const tz = customTz.trim()
+    if (!tz) { setCustomError(t('dashboard.timezoneCustomErrorEmpty')); return }
+    if (!isValidTz(tz)) { setCustomError(t('dashboard.timezoneCustomErrorInvalid')); return }
+    if (zones.find(z => z.tz === tz)) { setCustomError(t('dashboard.timezoneCustomErrorDuplicate')); return }
+    const label = customLabel.trim() || tz.split('/').pop()?.replace(/_/g, ' ') || tz
+    setZones([...zones, { label, tz }])
+    setCustomLabel(''); setCustomTz(''); setCustomError(''); setShowAdd(false)
+  }
+
   const addZone = (zone) => {
     if (!zones.find(z => z.tz === zone.tz)) {
       setZones([...zones, zone])
@@ -70,7 +89,7 @@ export default function TimezoneWidget() {
 
   const removeZone = (tz) => setZones(zones.filter(z => z.tz !== tz))
 
-  const localTime = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+  const localTime = new Date().toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })
   const rawZone = Intl.DateTimeFormat().resolvedOptions().timeZone
   const localZone = rawZone.split('/').pop().replace(/_/g, ' ')
   // Show abbreviated timezone name (e.g. CET, CEST, EST)
@@ -96,7 +115,7 @@ export default function TimezoneWidget() {
         {zones.map(z => (
           <div key={z.tz} className="flex items-center justify-between group">
             <div>
-              <p className="text-lg font-bold tabular-nums" style={{ color: 'var(--text-primary)' }}>{getTime(z.tz)}</p>
+              <p className="text-lg font-bold tabular-nums" style={{ color: 'var(--text-primary)' }}>{getTime(z.tz, locale, is12h)}</p>
               <p className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{z.label} <span style={{ color: 'var(--text-muted)' }}>{getOffset(z.tz)}</span></p>
             </div>
             <button onClick={() => removeZone(z.tz)} className="opacity-0 group-hover:opacity-100 p-1 rounded transition-all" style={{ color: 'var(--text-faint)' }}>
@@ -108,7 +127,29 @@ export default function TimezoneWidget() {
 
       {/* Add zone dropdown */}
       {showAdd && (
-        <div className="mt-2 rounded-xl p-2 max-h-[200px] overflow-auto" style={{ background: 'var(--bg-secondary)' }}>
+        <div className="mt-2 rounded-xl p-2 max-h-[280px] overflow-auto" style={{ background: 'var(--bg-secondary)' }}>
+          {/* Custom timezone */}
+          <div className="px-2 py-2 mb-2 rounded-lg" style={{ background: 'var(--bg-card)' }}>
+            <p className="text-[10px] font-semibold uppercase tracking-wide mb-2" style={{ color: 'var(--text-faint)' }}>{t('dashboard.timezoneCustomTitle')}</p>
+            <div className="space-y-1.5">
+              <input value={customLabel} onChange={e => setCustomLabel(e.target.value)}
+                placeholder={t('dashboard.timezoneCustomLabelPlaceholder')}
+                className="w-full px-2 py-1.5 rounded-lg text-xs outline-none"
+                style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)', border: '1px solid var(--border-secondary)' }} />
+              <input value={customTz} onChange={e => { setCustomTz(e.target.value); setCustomError('') }}
+                placeholder={t('dashboard.timezoneCustomTzPlaceholder')}
+                className="w-full px-2 py-1.5 rounded-lg text-xs outline-none"
+                style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)', border: `1px solid ${customError ? '#ef4444' : 'var(--border-secondary)'}` }}
+                onKeyDown={e => { if (e.key === 'Enter') addCustomZone() }} />
+              {customError && <p className="text-[10px]" style={{ color: '#ef4444' }}>{customError}</p>}
+              <button onClick={addCustomZone}
+                className="w-full py-1.5 rounded-lg text-xs font-medium transition-colors"
+                style={{ background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
+                {t('dashboard.timezoneCustomAdd')}
+              </button>
+            </div>
+          </div>
+          {/* Popular zones */}
           {POPULAR_ZONES.filter(z => !zones.find(existing => existing.tz === z.tz)).map(z => (
             <button key={z.tz} onClick={() => addZone(z)}
               className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-xs text-left transition-colors"
@@ -116,7 +157,7 @@ export default function TimezoneWidget() {
               onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
               onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
               <span className="font-medium">{z.label}</span>
-              <span className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{getTime(z.tz)}</span>
+              <span className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{getTime(z.tz, locale, is12h)}</span>
             </button>
           ))}
         </div>

client/src/components/Files/FileManager.tsx

@@ -1,11 +1,15 @@
 import ReactDOM from 'react-dom'
-import { useState, useCallback, useRef } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
 import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { filesApi } from '../../api/client'
 import type { Place, Reservation, TripFile, Day, AssignmentsMap } from '../../types'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
+
+import { getAuthUrl } from '../../api/authUrl'
 
 function isImage(mimeType) {
   if (!mimeType) return false
@@ -41,6 +45,10 @@ interface ImageLightboxProps {
 
 function ImageLightbox({ file, onClose }: ImageLightboxProps) {
   const { t } = useTranslation()
+  const [imgSrc, setImgSrc] = useState('')
+  useEffect(() => {
+    getAuthUrl(file.url, 'download').then(setImgSrc)
+  }, [file.url])
   return (
     <div
       style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
@@ -48,16 +56,20 @@ function ImageLightbox({ file, onClose }: ImageLightboxProps) {
     >
       <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }} onClick={e => e.stopPropagation()}>
         <img
-          src={file.url}
+          src={imgSrc}
           alt={file.original_name}
           style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }}
         />
         <div style={{ position: 'absolute', top: -40, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
           <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '80%' }}>{file.original_name}</span>
           <div style={{ display: 'flex', gap: 8 }}>
-            <a href={file.url} target="_blank" rel="noreferrer" style={{ color: 'rgba(255,255,255,0.7)', display: 'flex' }} title={t('files.openTab')}>
+            <button
+              onClick={async () => { const u = await getAuthUrl(file.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
+              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}
+              title={t('files.openTab')}
+            >
               <ExternalLink size={16} />
-            </a>
+            </button>
             <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}>
               <X size={18} />
             </button>
@@ -68,6 +80,15 @@ function ImageLightbox({ file, onClose }: ImageLightboxProps) {
   )
 }
 
+// Authenticated image — fetches a short-lived download token and renders the image
+function AuthedImg({ src, style }: { src: string; style?: React.CSSProperties }) {
+  const [authSrc, setAuthSrc] = useState('')
+  useEffect(() => {
+    getAuthUrl(src, 'download').then(setAuthSrc)
+  }, [src])
+  return authSrc ? <img src={authSrc} alt="" style={style} /> : null
+}
+
 // Source badge
 interface SourceBadgeProps {
   icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
@@ -153,6 +174,8 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
   const [trashFiles, setTrashFiles] = useState<TripFile[]>([])
   const [loadingTrash, setLoadingTrash] = useState(false)
   const toast = useToast()
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
   const { t, locale } = useTranslation()
 
   const loadTrash = useCallback(async () => {
@@ -247,6 +270,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
   })
 
   const handlePaste = useCallback((e) => {
+    if (!can('file_upload', trip)) return
     const items = e.clipboardData?.items
     if (!items) return
     const pastedFiles = []
@@ -281,6 +305,14 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
   }
 
   const [previewFile, setPreviewFile] = useState(null)
+  const [previewFileUrl, setPreviewFileUrl] = useState('')
+  useEffect(() => {
+    if (previewFile) {
+      getAuthUrl(previewFile.url, 'download').then(setPreviewFileUrl)
+    } else {
+      setPreviewFileUrl('')
+    }
+  }, [previewFile?.url])
   const [assignFileId, setAssignFileId] = useState<number | null>(null)
 
   const handleAssign = async (fileId: number, data: { place_id?: number | null; reservation_id?: number | null }) => {
@@ -302,12 +334,15 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
 
   const renderFileRow = (file: TripFile, isTrash = false) => {
     const FileIcon = getFileIcon(file.mime_type)
-    const linkedPlace = places?.find(p => p.id === file.place_id)
-    const linkedReservation = file.reservation_id
-      ? (reservations?.find(r => r.id === file.reservation_id) || { title: file.reservation_title })
-      : null
-    const fileUrl = file.url || (file.filename?.startsWith('files/') ? `/uploads/${file.filename}` : `/uploads/files/${file.filename}`)
-
+    const allLinkedPlaceIds = new Set<number>()
+    if (file.place_id) allLinkedPlaceIds.add(file.place_id)
+    for (const pid of (file.linked_place_ids || [])) allLinkedPlaceIds.add(pid)
+    const linkedPlaces = [...allLinkedPlaceIds].map(pid => places?.find(p => p.id === pid)).filter(Boolean)
+    // All linked reservations (primary + file_links)
+    const allLinkedResIds = new Set<number>()
+    if (file.reservation_id) allLinkedResIds.add(file.reservation_id)
+    for (const rid of (file.linked_reservation_ids || [])) allLinkedResIds.add(rid)
+    const linkedReservations = [...allLinkedResIds].map(rid => reservations?.find(r => r.id === rid)).filter(Boolean)
     return (
       <div key={file.id} style={{
         background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
@@ -321,7 +356,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
       >
         {/* Icon or thumbnail */}
         <div
-          onClick={() => !isTrash && openFile({ ...file, url: fileUrl })}
+          onClick={() => !isTrash && openFile(file)}
           style={{
             flexShrink: 0, width: 36, height: 36, borderRadius: 8,
             background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -329,7 +364,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
           }}
         >
           {isImage(file.mime_type)
-            ? <img src={fileUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+            ? <AuthedImg src={file.url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
             : (() => {
                 const ext = (file.original_name || '').split('.').pop()?.toUpperCase() || '?'
                 const isPdf = file.mime_type === 'application/pdf'
@@ -350,7 +385,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
             )}
             {!isTrash && file.starred ? <Star size={12} fill="#facc15" color="#facc15" style={{ flexShrink: 0 }} /> : null}
             <span
-              onClick={() => !isTrash && openFile({ ...file, url: fileUrl })}
+              onClick={() => !isTrash && openFile(file)}
               style={{ fontWeight: 500, fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: isTrash ? 'default' : 'pointer' }}
             >
               {file.original_name}
@@ -365,12 +400,12 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
             {file.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formatSize(file.file_size)}</span>}
             <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formatDateWithLocale(file.created_at, locale)}</span>
 
-            {linkedPlace && (
-              <SourceBadge icon={MapPin} label={`${t('files.sourcePlan')} · ${linkedPlace.name}`} />
-            )}
-            {linkedReservation && (
-              <SourceBadge icon={Ticket} label={`${t('files.sourceBooking')} · ${linkedReservation.title || t('files.sourceBooking')}`} />
-            )}
+            {linkedPlaces.map(p => (
+              <SourceBadge key={p.id} icon={MapPin} label={`${t('files.sourcePlan')} · ${p.name}`} />
+            ))}
+            {linkedReservations.map(r => (
+              <SourceBadge key={r.id} icon={Ticket} label={`${t('files.sourceBooking')} · ${r.title || t('files.sourceBooking')}`} />
+            ))}
             {file.note_id && (
               <SourceBadge icon={StickyNote} label={t('files.sourceCollab') || 'Collab Notes'} />
             )}
@@ -381,14 +416,14 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
         <div className="file-actions" style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
           {isTrash ? (
             <>
-              <button onClick={() => handleRestore(file.id)} title={t('files.restore') || 'Restore'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+              {can('file_delete', trip) && <button onClick={() => handleRestore(file.id)} title={t('files.restore') || 'Restore'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
                 onMouseEnter={e => e.currentTarget.style.color = '#22c55e'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                 <RotateCcw size={14} />
-              </button>
-              <button onClick={() => handlePermanentDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+              </button>}
+              {can('file_delete', trip) && <button onClick={() => handlePermanentDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
                 onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                 <Trash2 size={14} />
-              </button>
+              </button>}
             </>
           ) : (
             <>
@@ -396,18 +431,18 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                 onMouseEnter={e => { if (!file.starred) e.currentTarget.style.color = '#facc15' }} onMouseLeave={e => { if (!file.starred) e.currentTarget.style.color = 'var(--text-faint)' }}>
                 <Star size={14} fill={file.starred ? '#facc15' : 'none'} />
               </button>
-              <button onClick={() => setAssignFileId(file.id)} title={t('files.assign') || 'Assign'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+              {can('file_edit', trip) && <button onClick={() => setAssignFileId(file.id)} title={t('files.assign') || 'Assign'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
                 onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                 <Pencil size={14} />
-              </button>
-              <button onClick={() => openFile({ ...file, url: fileUrl })} title={t('common.open')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+              </button>}
+              <button onClick={() => openFile(file)} title={t('common.open')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
                 onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                 <ExternalLink size={14} />
               </button>
-              <button onClick={() => handleDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+              {can('file_delete', trip) && <button onClick={() => handleDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
                 onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                 <Trash2 size={14} />
-              </button>
+              </button>}
             </>
           )}
         </div>
@@ -477,20 +512,45 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                   }
                 }
                 const unassigned = places.filter(p => !assignedPlaceIds.has(p.id))
-                const placeBtn = (p: Place) => (
-                  <button key={p.id} onClick={() => handleAssign(file.id, { place_id: file.place_id === p.id ? null : p.id })} style={{
-                    width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: file.place_id === p.id ? 'var(--bg-hover)' : 'none',
-                    border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
-                    borderRadius: 8, fontFamily: 'inherit', fontWeight: file.place_id === p.id ? 600 : 400,
-                    display: 'flex', alignItems: 'center', gap: 6,
-                  }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = file.place_id === p.id ? 'var(--bg-hover)' : 'transparent'}>
-                    <MapPin size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
-                    {file.place_id === p.id && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
-                  </button>
-                )
+                const placeBtn = (p: Place) => {
+                  const isLinked = file.place_id === p.id || (file.linked_place_ids || []).includes(p.id)
+                  return (
+                    <button key={p.id} onClick={async () => {
+                      if (isLinked) {
+                        if (file.place_id === p.id) {
+                          await handleAssign(file.id, { place_id: null })
+                        } else {
+                          try {
+                            const linksRes = await filesApi.getLinks(tripId, file.id)
+                            const link = (linksRes.links || []).find((l: any) => l.place_id === p.id)
+                            if (link) await filesApi.removeLink(tripId, file.id, link.id)
+                            refreshFiles()
+                          } catch {}
+                        }
+                      } else {
+                        if (!file.place_id) {
+                          await handleAssign(file.id, { place_id: p.id })
+                        } else {
+                          try {
+                            await filesApi.addLink(tripId, file.id, { place_id: p.id })
+                            refreshFiles()
+                          } catch {}
+                        }
+                      }
+                    }} style={{
+                      width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
+                      border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
+                      borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
+                      display: 'flex', alignItems: 'center', gap: 6,
+                    }}
+                      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                      onMouseLeave={e => e.currentTarget.style.background = isLinked ? 'var(--bg-hover)' : 'transparent'}>
+                      <MapPin size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
+                      {isLinked && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
+                    </button>
+                  )
+                }
 
                 const placesSection = places.length > 0 && (
                   <div style={{ flex: 1, minWidth: 0 }}>
@@ -519,20 +579,47 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                     <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
                       {t('files.assignBooking')}
                     </div>
-                    {reservations.map(r => (
-                      <button key={r.id} onClick={() => handleAssign(file.id, { reservation_id: file.reservation_id === r.id ? null : r.id })} style={{
-                        width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: file.reservation_id === r.id ? 'var(--bg-hover)' : 'none',
-                        border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
-                        borderRadius: 8, fontFamily: 'inherit', fontWeight: file.reservation_id === r.id ? 600 : 400,
-                        display: 'flex', alignItems: 'center', gap: 6,
-                      }}
-                        onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                        onMouseLeave={e => e.currentTarget.style.background = file.reservation_id === r.id ? 'var(--bg-hover)' : 'transparent'}>
-                        <Ticket size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title || r.name}</span>
-                        {file.reservation_id === r.id && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
-                      </button>
-                    ))}
+                    {reservations.map(r => {
+                      const isLinked = file.reservation_id === r.id || (file.linked_reservation_ids || []).includes(r.id)
+                      return (
+                        <button key={r.id} onClick={async () => {
+                          if (isLinked) {
+                            // Unlink: if primary reservation_id, clear it; if via file_links, remove link
+                            if (file.reservation_id === r.id) {
+                              await handleAssign(file.id, { reservation_id: null })
+                            } else {
+                              try {
+                                const linksRes = await filesApi.getLinks(tripId, file.id)
+                                const link = (linksRes.links || []).find((l: any) => l.reservation_id === r.id)
+                                if (link) await filesApi.removeLink(tripId, file.id, link.id)
+                                refreshFiles()
+                              } catch {}
+                            }
+                          } else {
+                            // Link: if no primary, set it; otherwise use file_links
+                            if (!file.reservation_id) {
+                              await handleAssign(file.id, { reservation_id: r.id })
+                            } else {
+                              try {
+                                await filesApi.addLink(tripId, file.id, { reservation_id: r.id })
+                                refreshFiles()
+                              } catch {}
+                            }
+                          }
+                        }} style={{
+                          width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
+                          border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
+                          borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
+                          display: 'flex', alignItems: 'center', gap: 6,
+                        }}
+                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                          onMouseLeave={e => e.currentTarget.style.background = isLinked ? 'var(--bg-hover)' : 'transparent'}>
+                          <Ticket size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title || r.name}</span>
+                          {isLinked && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
+                        </button>
+                      )
+                    })}
                   </div>
                 )
 
@@ -565,12 +652,13 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
               <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-                <a href={previewFile.url || `/uploads/files/${previewFile.filename}`} target="_blank" rel="noreferrer"
-                  style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
-                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}>
+                <button
+                  onClick={async () => { const u = await getAuthUrl(previewFile.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
+                  style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
+                  onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
+                  onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
                   <ExternalLink size={13} /> {t('files.openTab')}
-                </a>
+                </button>
                 <button onClick={() => setPreviewFile(null)}
                   style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 4, borderRadius: 6, transition: 'color 0.15s' }}
                   onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
@@ -580,13 +668,13 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
               </div>
             </div>
             <object
-              data={`${previewFile.url || `/uploads/files/${previewFile.filename}`}#view=FitH`}
+              data={previewFileUrl ? `${previewFileUrl}#view=FitH` : undefined}
               type="application/pdf"
               style={{ flex: 1, width: '100%', border: 'none' }}
               title={previewFile.original_name}
             >
               <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
-                <a href={previewFile.url || `/uploads/files/${previewFile.filename}`} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text-primary)', textDecoration: 'underline' }}>PDF herunterladen</a>
+                <button onClick={async () => { const u = await getAuthUrl(previewFile.url, 'download'); window.open(u, '_blank', 'noopener noreferrer') }} style={{ color: 'var(--text-primary)', textDecoration: 'underline', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}>PDF herunterladen</button>
               </p>
             </object>
           </div>
@@ -618,7 +706,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
       {showTrash ? (
         /* Trash view */
         <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
-          {trashFiles.length > 0 && (
+          {trashFiles.length > 0 && can('file_delete', trip) && (
             <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12 }}>
               <button onClick={handleEmptyTrash} style={{
                 padding: '5px 12px', borderRadius: 8, border: '1px solid #fecaca',
@@ -647,7 +735,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
       ) : (
         <>
           {/* Upload zone */}
-          <div
+          {can('file_upload', trip) && <div
             {...getRootProps()}
             style={{
               margin: '16px 16px 0', border: '2px dashed', borderRadius: 14, padding: '20px 16px',
@@ -672,7 +760,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                 </p>
               </>
             )}
-          </div>
+          </div>}
 
           {/* Filter tabs */}
           <div style={{ display: 'flex', gap: 4, padding: '12px 16px 0', flexShrink: 0, flexWrap: 'wrap' }}>

client/src/components/Layout/DemoBanner.tsx

@@ -86,6 +86,70 @@ const texts: Record<string, DemoTexts> = {
     selfHostLink: 'self-host it',
     close: 'Got it',
   },
+  es: {
+    titleBefore: 'Bienvenido a ',
+    titleAfter: '',
+    title: 'Bienvenido a la demo de TREK',
+    description: 'Puedes ver, editar y crear viajes. Todos los cambios se restablecen automáticamente cada hora.',
+    resetIn: 'Próximo reinicio en',
+    minutes: 'minutos',
+    uploadNote: 'Las subidas de archivos (fotos, documentos, portadas) están desactivadas en el modo demo.',
+    fullVersionTitle: 'Además, en la versión completa:',
+    features: [
+      'Subida de archivos (fotos, documentos, portadas)',
+      'Gestión de claves API (Google Maps, tiempo)',
+      'Gestión de usuarios y permisos',
+      'Copias de seguridad automáticas',
+      'Gestión de addons (activar/desactivar)',
+      'Inicio de sesión único OIDC / SSO',
+    ],
+    addonsTitle: 'Complementos modulares (se pueden desactivar en la versión completa)',
+    addons: [
+      ['Vacaciones', 'Planificador de vacaciones con calendario, festivos y fusión de usuarios'],
+      ['Atlas', 'Mapa del mundo con países visitados y estadísticas de viaje'],
+      ['Equipaje', 'Listas de comprobación para cada viaje'],
+      ['Presupuesto', 'Control de gastos con reparto'],
+      ['Documentos', 'Adjunta archivos a los viajes'],
+      ['Widgets', 'Conversor de divisas y zonas horarias'],
+    ],
+    whatIs: '¿Qué es TREK?',
+    whatIsDesc: 'Un planificador de viajes autohospedado con colaboración en tiempo real, mapas interactivos, inicio de sesión OIDC y modo oscuro.',
+    selfHost: 'Código abierto — ',
+    selfHostLink: 'alójalo tú mismo',
+    close: 'Entendido',
+  },
+  ar: {
+    titleBefore: 'مرحبًا بك في ',
+    titleAfter: '',
+    title: 'مرحبًا بك في النسخة التجريبية من TREK',
+    description: 'يمكنك عرض الرحلات وتعديلها وإنشاء رحلات جديدة. تتم إعادة ضبط جميع التغييرات تلقائيًا كل ساعة.',
+    resetIn: 'إعادة الضبط التالية خلال',
+    minutes: 'دقيقة',
+    uploadNote: 'رفع الملفات (الصور والمستندات وصور الغلاف) معطّل في وضع العرض التجريبي.',
+    fullVersionTitle: 'وفي النسخة الكاملة أيضًا:',
+    features: [
+      'رفع الملفات (الصور والمستندات وصور الغلاف)',
+      'إدارة مفاتيح API (خرائط Google والطقس)',
+      'إدارة المستخدمين والصلاحيات',
+      'نسخ احتياطية تلقائية',
+      'إدارة الإضافات (تفعيل/تعطيل)',
+      'تسجيل دخول موحد OIDC / SSO',
+    ],
+    addonsTitle: 'إضافات مرنة (يمكن تعطيلها في النسخة الكاملة)',
+    addons: [
+      ['Vacay', 'مخطط إجازات مع تقويم وعطل ودمج مستخدمين'],
+      ['Atlas', 'خريطة عالمية مع الدول التي تمت زيارتها وإحصاءات السفر'],
+      ['Packing', 'قوائم تجهيز لكل رحلة'],
+      ['Budget', 'تتبع المصروفات مع التقسيم'],
+      ['Documents', 'إرفاق الملفات بالرحلات'],
+      ['Widgets', 'محول عملات ومناطق زمنية'],
+    ],
+    whatIs: 'ما هو TREK؟',
+    whatIsDesc: 'مخطط رحلات مستضاف ذاتيًا مع تعاون لحظي وخرائط تفاعلية وتسجيل دخول OIDC ووضع داكن.',
+    selfHost: 'مفتوح المصدر — ',
+    selfHostLink: 'استضفه بنفسك',
+    close: 'فهمت',
+  },
 }
 
 const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield]
@@ -159,7 +223,7 @@ export default function DemoBanner(): React.ReactElement | null {
           <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
             <Map size={14} style={{ color: '#111827' }} />
             <span style={{ fontSize: 12, fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 4 }}>
-              {language === 'de' ? 'Was ist ' : 'What is '}<img src="/text-dark.svg" alt="TREK" style={{ height: 13, marginRight: -2 }} />?
+              {t.whatIs}
             </span>
           </div>
           <p style={{ fontSize: 12, color: '#64748b', lineHeight: 1.5, margin: 0 }}>{t.whatIsDesc}</p>

client/src/components/Layout/Navbar.tsx

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom'
 import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
+import { useAddonStore } from '../../store/addonStore'
 import { useTranslation } from '../../i18n'
-import { addonsApi } from '../../api/client'
 import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 
@@ -28,29 +28,21 @@ interface Addon {
 export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }: NavbarProps): React.ReactElement {
   const { user, logout } = useAuthStore()
   const { settings, updateSetting } = useSettingsStore()
+  const { addons: allAddons, loadAddons } = useAddonStore()
   const { t, locale } = useTranslation()
   const navigate = useNavigate()
   const location = useLocation()
   const [userMenuOpen, setUserMenuOpen] = useState<boolean>(false)
   const [appVersion, setAppVersion] = useState<string | null>(null)
-  const [globalAddons, setGlobalAddons] = useState<Addon[]>([])
   const darkMode = settings.dark_mode
   const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
 
-  const loadAddons = () => {
-    if (user) {
-      addonsApi.enabled().then(data => {
-        setGlobalAddons(data.addons.filter(a => a.type === 'global'))
-      }).catch(() => {})
-    }
-  }
-  useEffect(loadAddons, [user, location.pathname])
-  // Listen for addon changes from AddonManager
+  // Only show 'global' type addons in the navbar — 'integration' addons have no dedicated page
+  const globalAddons = allAddons.filter((a: Addon) => a.type === 'global' && a.enabled)
+
   useEffect(() => {
-    const handler = () => loadAddons()
-    window.addEventListener('addons-changed', handler)
-    return () => window.removeEventListener('addons-changed', handler)
-  }, [user])
+    if (user) loadAddons()
+  }, [user, location.pathname])
 
   useEffect(() => {
     import('../../api/client').then(({ authApi }) => {
@@ -67,6 +59,12 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
     updateSetting('dark_mode', dark ? 'light' : 'dark').catch(() => {})
   }
 
+  const getAddonName = (addon: Addon): string => {
+    const key = `admin.addons.catalog.${addon.id}.name`
+    const translated = t(key)
+    return translated !== key ? translated : addon.name
+  }
+
   return (
     <nav style={{
       background: dark ? 'rgba(9,9,11,0.95)' : 'rgba(255,255,255,0.95)',
@@ -124,7 +122,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
                   onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
                   onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent' }}>
                   <Icon className="w-3.5 h-3.5" />
-                  <span className="hidden md:inline">{addon.name}</span>
+                  <span className="hidden md:inline">{getAddonName(addon)}</span>
                 </Link>
               )
             })}

client/src/components/Map/MapView.tsx

@@ -1,12 +1,20 @@
-import { useEffect, useRef, useState, useMemo } from 'react'
+import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo } from 'react'
 import DOM from 'react-dom'
-import { MapContainer, TileLayer, Marker, Tooltip, Polyline, useMap } from 'react-leaflet'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MapContainer, TileLayer, Marker, Tooltip, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import { mapsApi } from '../../api/client'
-import { getCategoryIcon } from '../shared/categoryIcons'
+import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
+
+function categoryIconSvg(iconName: string | null | undefined, size: number): string {
+  const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
+  try {
+    return renderToStaticMarkup(createElement(IconComponent, { size, color: 'white', strokeWidth: 2.5 }))
+  } catch { return '' }
+}
 import type { Place } from '../../types'
 
 // Fix default marker icons for vite
@@ -26,7 +34,12 @@ function escAttr(s) {
   return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 
+const iconCache = new Map<string, L.DivIcon>()
+
 function createPlaceIcon(place, orderNumbers, isSelected) {
+  const cacheKey = `${place.id}:${isSelected}:${place.image_url || ''}:${place.category_color || ''}:${place.category_icon || ''}:${orderNumbers?.join(',') || ''}`
+  const cached = iconCache.get(cacheKey)
+  if (cached) return cached
   const size = isSelected ? 44 : 36
   const borderColor = isSelected ? '#111827' : 'white'
   const borderWidth = isSelected ? 3 : 2.5
@@ -34,9 +47,8 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
     ? '0 0 0 3px rgba(17,24,39,0.25), 0 4px 14px rgba(0,0,0,0.3)'
     : '0 2px 8px rgba(0,0,0,0.22)'
   const bgColor = place.category_color || '#6b7280'
-  const icon = place.category_icon || '📍'
 
-  // Number badges (bottom-right), supports multiple numbers for duplicate places
+  // Number badges (bottom-right)
   let badgeHtml = ''
   if (orderNumbers && orderNumbers.length > 0) {
     const label = orderNumbers.join(' · ')
@@ -54,28 +66,30 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
     ">${label}</span>`
   }
 
-  if (place.image_url) {
-    return L.divIcon({
+  // Base64 data URL thumbnails — no external image fetch during zoom
+  // Only use base64 data URLs for markers — external URLs cause zoom lag
+  if (place.image_url && place.image_url.startsWith('data:')) {
+    const imgIcon = L.divIcon({
       className: '',
       html: `<div style="
         width:${size}px;height:${size}px;border-radius:50%;
         border:${borderWidth}px solid ${borderColor};
         box-shadow:${shadow};
-        overflow:visible;background:${bgColor};
-        cursor:pointer;flex-shrink:0;position:relative;
+        overflow:hidden;background:${bgColor};
+        cursor:pointer;position:relative;
       ">
-        <div style="width:100%;height:100%;border-radius:50%;overflow:hidden;">
-          <img src="${escAttr(place.image_url)}" style="width:100%;height:100%;object-fit:cover;" />
-        </div>
+        <img src="${place.image_url}" width="${size}" height="${size}" style="display:block;border-radius:50%;object-fit:cover;" />
         ${badgeHtml}
       </div>`,
       iconSize: [size, size],
       iconAnchor: [size / 2, size / 2],
       tooltipAnchor: [size / 2 + 6, 0],
     })
+    iconCache.set(cacheKey, imgIcon)
+    return imgIcon
   }
 
-  return L.divIcon({
+  const fallbackIcon = L.divIcon({
     className: '',
     html: `<div style="
       width:${size}px;height:${size}px;border-radius:50%;
@@ -84,14 +98,17 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
       background:${bgColor};
       display:flex;align-items:center;justify-content:center;
       cursor:pointer;position:relative;
+      will-change:transform;contain:layout style;
     ">
-      <span style="font-size:${isSelected ? 18 : 15}px;line-height:1;">${icon}</span>
+      ${categoryIconSvg(place.category_icon, isSelected ? 18 : 15)}
       ${badgeHtml}
     </div>`,
     iconSize: [size, size],
     iconAnchor: [size / 2, size / 2],
     tooltipAnchor: [size / 2 + 6, 0],
   })
+  iconCache.set(cacheKey, fallbackIcon)
+  return fallbackIcon
 }
 
 interface SelectionControllerProps {
@@ -107,20 +124,14 @@ function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }
 
   useEffect(() => {
     if (selectedPlaceId && selectedPlaceId !== prev.current) {
-      // Fit all day places into view (so you see context), but ensure selected is visible
-      const toFit = dayPlaces.length > 0 ? dayPlaces : places.filter(p => p.id === selectedPlaceId)
-      const withCoords = toFit.filter(p => p.lat && p.lng)
-      if (withCoords.length > 0) {
-        try {
-          const bounds = L.latLngBounds(withCoords.map(p => [p.lat, p.lng]))
-          if (bounds.isValid()) {
-            map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
-          }
-        } catch {}
+      // Pan to the selected place without changing zoom
+      const selected = places.find(p => p.id === selectedPlaceId)
+      if (selected?.lat && selected?.lng) {
+        map.panTo([selected.lat, selected.lng], { animate: true })
       }
     }
     prev.current = selectedPlaceId
-  }, [selectedPlaceId, places, dayPlaces, paddingOpts, map])
+  }, [selectedPlaceId, places, map])
 
   return null
 }
@@ -172,6 +183,16 @@ interface MapClickHandlerProps {
   onClick: ((e: L.LeafletMouseEvent) => void) | null
 }
 
+function ZoomTracker({ onZoomStart, onZoomEnd }: { onZoomStart: () => void; onZoomEnd: () => void }) {
+  const map = useMap()
+  useEffect(() => {
+    map.on('zoomstart', onZoomStart)
+    map.on('zoomend', onZoomEnd)
+    return () => { map.off('zoomstart', onZoomStart); map.off('zoomend', onZoomEnd) }
+  }, [map, onZoomStart, onZoomEnd])
+  return null
+}
+
 function MapClickHandler({ onClick }: MapClickHandlerProps) {
   const map = useMap()
   useEffect(() => {
@@ -243,10 +264,99 @@ function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
 }
 
 // Module-level photo cache shared with PlaceAvatar
-const mapPhotoCache = new Map()
-const mapPhotoInFlight = new Set()
+import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
 
-export function MapView({
+// Live location tracker — blue dot with pulse animation (like Apple/Google Maps)
+function LocationTracker() {
+  const map = useMap()
+  const [position, setPosition] = useState<[number, number] | null>(null)
+  const [accuracy, setAccuracy] = useState(0)
+  const [tracking, setTracking] = useState(false)
+  const watchId = useRef<number | null>(null)
+
+  const startTracking = useCallback(() => {
+    if (!('geolocation' in navigator)) return
+    setTracking(true)
+    watchId.current = navigator.geolocation.watchPosition(
+      (pos) => {
+        const latlng: [number, number] = [pos.coords.latitude, pos.coords.longitude]
+        setPosition(latlng)
+        setAccuracy(pos.coords.accuracy)
+      },
+      () => setTracking(false),
+      { enableHighAccuracy: true, maximumAge: 5000 }
+    )
+  }, [])
+
+  const stopTracking = useCallback(() => {
+    if (watchId.current !== null) navigator.geolocation.clearWatch(watchId.current)
+    watchId.current = null
+    setTracking(false)
+    setPosition(null)
+  }, [])
+
+  const toggleTracking = useCallback(() => {
+    if (tracking) { stopTracking() } else { startTracking() }
+  }, [tracking, startTracking, stopTracking])
+
+  // Center map on position when first acquired
+  const centered = useRef(false)
+  useEffect(() => {
+    if (position && !centered.current) {
+      map.setView(position, 15)
+      centered.current = true
+    }
+  }, [position, map])
+
+  // Cleanup on unmount
+  useEffect(() => () => { if (watchId.current !== null) navigator.geolocation.clearWatch(watchId.current) }, [])
+
+  return (
+    <>
+      {/* Location button */}
+      <div style={{
+        position: 'absolute', bottom: 20, right: 10, zIndex: 1000,
+      }}>
+        <button onClick={toggleTracking} style={{
+          width: 36, height: 36, borderRadius: '50%',
+          border: 'none', cursor: 'pointer',
+          background: tracking ? '#3b82f6' : 'var(--bg-card, white)',
+          color: tracking ? 'white' : 'var(--text-muted, #6b7280)',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          transition: 'background 0.2s, color 0.2s',
+        }}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="3" />
+            <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Blue dot + accuracy circle */}
+      {position && (
+        <>
+          {accuracy < 500 && (
+            <Circle center={position} radius={accuracy} pathOptions={{ color: '#3b82f6', fillColor: '#3b82f6', fillOpacity: 0.06, weight: 0.5, opacity: 0.3 }} />
+          )}
+          <CircleMarker center={position} radius={7} pathOptions={{ color: 'white', fillColor: '#3b82f6', fillOpacity: 1, weight: 2.5 }} />
+        </>
+      )}
+
+      {/* Pulse animation CSS */}
+      {position && (
+        <style>{`
+          @keyframes location-pulse {
+            0% { transform: scale(1); opacity: 0.6; }
+            100% { transform: scale(2.5); opacity: 0; }
+          }
+        `}</style>
+      )}
+    </>
+  )
+}
+
+export const MapView = memo(function MapView({
   places = [],
   dayPlaces = [],
   route = null,
@@ -274,39 +384,110 @@ export function MapView({
     const right = rightWidth + 40
     return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
   }, [leftWidth, rightWidth, hasInspector])
-  const [photoUrls, setPhotoUrls] = useState({})
 
-  // Fetch photos for places (Google or Wikimedia Commons fallback)
+  // photoUrls: only base64 thumbs for smooth map zoom
+  const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
+
+  // Fetch photos via shared service — subscribe to thumb (base64) availability
+  const placeIds = useMemo(() => places.map(p => p.id).join(','), [places])
   useEffect(() => {
-    places.forEach(place => {
-      if (place.image_url) return
+    if (!places || places.length === 0) return
+    const cleanups: (() => void)[] = []
+
+    const setThumb = (cacheKey: string, thumb: string) => {
+      iconCache.clear()
+      setPhotoUrls(prev => prev[cacheKey] === thumb ? prev : { ...prev, [cacheKey]: thumb })
+    }
+
+    for (const place of places) {
+      if (place.image_url && place.image_url.startsWith('data:')) continue
       const cacheKey = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
-      if (!cacheKey) return
-      if (mapPhotoCache.has(cacheKey)) {
-        const cached = mapPhotoCache.get(cacheKey)
-        if (cached) setPhotoUrls(prev => prev[cacheKey] === cached ? prev : ({ ...prev, [cacheKey]: cached }))
-        return
+      if (!cacheKey) continue
+
+      const cached = getCached(cacheKey)
+      if (cached?.thumbDataUrl) {
+        setThumb(cacheKey, cached.thumbDataUrl)
+        continue
       }
-      if (mapPhotoInFlight.has(cacheKey)) return
-      const photoId = place.google_place_id || place.osm_id
-      if (!photoId && !(place.lat && place.lng)) return
-      mapPhotoInFlight.add(cacheKey)
-      mapsApi.placePhoto(photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
-        .then(data => {
-          if (data.photoUrl) {
-            mapPhotoCache.set(cacheKey, data.photoUrl)
-            setPhotoUrls(prev => ({ ...prev, [cacheKey]: data.photoUrl }))
-          } else {
-            mapPhotoCache.set(cacheKey, null)
-          }
-          mapPhotoInFlight.delete(cacheKey)
-        })
-        .catch(() => { mapPhotoCache.set(cacheKey, null); mapPhotoInFlight.delete(cacheKey) })
+
+      // Subscribe for when thumb becomes available
+      cleanups.push(onThumbReady(cacheKey, thumb => setThumb(cacheKey, thumb)))
+
+      // Always fetch through API — returns fresh URL + converts to base64
+      if (!cached && !isLoading(cacheKey)) {
+        const photoId = place.google_place_id || place.osm_id
+        if (photoId || (place.lat && place.lng)) {
+          fetchPhoto(cacheKey, photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
+        }
+      }
+    }
+
+    return () => cleanups.forEach(fn => fn())
+  }, [placeIds])
+
+  const clusterIconCreateFunction = useCallback((cluster) => {
+    const count = cluster.getChildCount()
+    const size = count < 10 ? 36 : count < 50 ? 42 : 48
+    return L.divIcon({
+      html: `<div class="marker-cluster-custom" style="width:${size}px;height:${size}px;"><span>${count}</span></div>`,
+      className: 'marker-cluster-wrapper',
+      iconSize: L.point(size, size),
     })
-  }, [places])
+  }, [])
+
+  const isTouchDevice = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0)
+
+  const markers = useMemo(() => places.map((place) => {
+    const isSelected = place.id === selectedPlaceId
+    const pck = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
+    const resolvedPhoto = (pck && photoUrls[pck]) || (place.image_url?.startsWith('data:') ? place.image_url : null) || null
+    const orderNumbers = dayOrderMap[place.id] ?? null
+    const icon = createPlaceIcon({ ...place, image_url: resolvedPhoto }, orderNumbers, isSelected)
+
+    return (
+      <Marker
+        key={place.id}
+        position={[place.lat, place.lng]}
+        icon={icon}
+        eventHandlers={{
+          click: () => onMarkerClick && onMarkerClick(place.id),
+        }}
+        zIndexOffset={isSelected ? 1000 : 0}
+      >
+        <Tooltip
+          direction="right"
+          offset={[0, 0]}
+          opacity={1}
+          className="map-tooltip"
+          permanent={isTouchDevice && isSelected}
+        >
+          <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+            <div style={{ fontWeight: 600, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>
+              {place.name}
+            </div>
+            {place.category_name && (() => {
+              const CatIcon = getCategoryIcon(place.category_icon)
+              return (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
+                  <CatIcon size={10} style={{ color: place.category_color || 'var(--text-muted)', flexShrink: 0 }} />
+                  <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{place.category_name}</span>
+                </div>
+              )
+            })()}
+            {place.address && (
+              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2, maxWidth: 180, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                {place.address}
+              </div>
+            )}
+          </div>
+        </Tooltip>
+      </Marker>
+    )
+  }), [places, selectedPlaceId, dayOrderMap, photoUrls, onMarkerClick, isTouchDevice])
 
   return (
     <MapContainer
+      id="trek-map"
       center={center}
       zoom={zoom}
       zoomControl={false}
@@ -317,6 +498,10 @@ export function MapView({
         url={tileUrl}
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         maxZoom={19}
+        keepBuffer={8}
+        updateWhenZooming={false}
+        updateWhenIdle={true}
+        referrerPolicy="strict-origin-when-cross-origin"
       />
 
       <MapController center={center} zoom={zoom} />
@@ -324,74 +509,21 @@ export function MapView({
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />
+      <LocationTracker />
 
       <MarkerClusterGroup
         chunkedLoading
+        chunkInterval={30}
+        chunkDelay={0}
         maxClusterRadius={30}
         disableClusteringAtZoom={11}
         spiderfyOnMaxZoom
         showCoverageOnHover={false}
         zoomToBoundsOnClick
-        singleMarkerMode
-        iconCreateFunction={(cluster) => {
-          const count = cluster.getChildCount()
-          const size = count < 10 ? 36 : count < 50 ? 42 : 48
-          return L.divIcon({
-            html: `<div class="marker-cluster-custom"
-              style="width:${size}px;height:${size}px;">
-              <span>${count}</span>
-            </div>`,
-            className: 'marker-cluster-wrapper',
-            iconSize: L.point(size, size),
-          })
-        }}
+        animate={false}
+        iconCreateFunction={clusterIconCreateFunction}
       >
-        {places.map((place) => {
-          const isSelected = place.id === selectedPlaceId
-          const cacheKey = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
-          const resolvedPhotoUrl = place.image_url || (cacheKey && photoUrls[cacheKey]) || null
-          const orderNumbers = dayOrderMap[place.id] ?? null
-          const icon = createPlaceIcon({ ...place, image_url: resolvedPhotoUrl }, orderNumbers, isSelected)
-
-          return (
-            <Marker
-              key={place.id}
-              position={[place.lat, place.lng]}
-              icon={icon}
-              eventHandlers={{
-                click: () => onMarkerClick && onMarkerClick(place.id),
-              }}
-              zIndexOffset={isSelected ? 1000 : 0}
-            >
-              <Tooltip
-                direction="right"
-                offset={[0, 0]}
-                opacity={1}
-                className="map-tooltip"
-              >
-                <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-                  <div style={{ fontWeight: 600, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>
-                    {place.name}
-                  </div>
-                  {place.category_name && (() => {
-                    const CatIcon = getCategoryIcon(place.category_icon)
-                    return (
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
-                        <CatIcon size={10} style={{ color: place.category_color || 'var(--text-muted)', flexShrink: 0 }} />
-                        <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{place.category_name}</span>
-                      </div>
-                    )
-                  })()}
-                  {place.address && (
-                    <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2, maxWidth: 180, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                      {place.address}
-                    </div>
-                  )}
-                </div>
-              </Tooltip>
-            </Marker>
-          )
-        })}
+        {markers}
       </MarkerClusterGroup>
 
       {route && route.length > 1 && (
@@ -408,6 +540,24 @@ export function MapView({
           ))}
         </>
       )}
+
+      {/* GPX imported route geometries */}
+      {places.map((place) => {
+        if (!place.route_geometry) return null
+        try {
+          const coords = JSON.parse(place.route_geometry) as [number, number][]
+          if (!coords || coords.length < 2) return null
+          return (
+            <Polyline
+              key={`gpx-${place.id}`}
+              positions={coords}
+              color={place.category_color || '#3b82f6'}
+              weight={3.5}
+              opacity={0.75}
+            />
+          )
+        } catch { return null }
+      })}
     </MapContainer>
   )
-}
+})

client/src/components/Map/RouteCalculator.ts

@@ -13,7 +13,7 @@ export async function calculateRoute(
   }
 
   const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  const url = `${OSRM_BASE}/driving/${coords}?overview=full&geometries=geojson&steps=false`
+  const url = `${OSRM_BASE}/${profile}/${coords}?overview=full&geometries=geojson&steps=false`
 
   const response = await fetch(url, { signal })
   if (!response.ok) {

client/src/components/Memories/MemoriesPanel.tsx

@@ -0,0 +1,855 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen } from 'lucide-react'
+import apiClient from '../../api/client'
+import { useAuthStore } from '../../store/authStore'
+import { useTranslation } from '../../i18n'
+import { getAuthUrl } from '../../api/authUrl'
+
+function ImmichImg({ baseUrl, style, loading }: { baseUrl: string; style?: React.CSSProperties; loading?: 'lazy' | 'eager' }) {
+  const [src, setSrc] = useState('')
+  useEffect(() => {
+    getAuthUrl(baseUrl, 'immich').then(setSrc)
+  }, [baseUrl])
+  return src ? <img src={src} alt="" loading={loading} style={style} /> : null
+}
+
+// ── Types ───────────────────────────────────────────────────────────────────
+
+interface TripPhoto {
+  immich_asset_id: string
+  user_id: number
+  username: string
+  shared: number
+  added_at: string
+}
+
+interface ImmichAsset {
+  id: string
+  takenAt: string
+  city: string | null
+  country: string | null
+}
+
+interface MemoriesPanelProps {
+  tripId: number
+  startDate: string | null
+  endDate: string | null
+}
+
+// ── Main Component ──────────────────────────────────────────────────────────
+
+export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPanelProps) {
+  const { t } = useTranslation()
+  const currentUser = useAuthStore(s => s.user)
+
+  const [connected, setConnected] = useState(false)
+  const [loading, setLoading] = useState(true)
+
+  // Trip photos (saved selections)
+  const [tripPhotos, setTripPhotos] = useState<TripPhoto[]>([])
+
+  // Photo picker
+  const [showPicker, setShowPicker] = useState(false)
+  const [pickerPhotos, setPickerPhotos] = useState<ImmichAsset[]>([])
+  const [pickerLoading, setPickerLoading] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+
+  // Confirm share popup
+  const [showConfirmShare, setShowConfirmShare] = useState(false)
+
+  // Filters & sort
+  const [sortAsc, setSortAsc] = useState(true)
+  const [locationFilter, setLocationFilter] = useState('')
+
+  // Album linking
+  const [showAlbumPicker, setShowAlbumPicker] = useState(false)
+  const [albums, setAlbums] = useState<{ id: string; albumName: string; assetCount: number }[]>([])
+  const [albumsLoading, setAlbumsLoading] = useState(false)
+  const [albumLinks, setAlbumLinks] = useState<{ id: number; immich_album_id: string; album_name: string; user_id: number; username: string; sync_enabled: number; last_synced_at: string | null }[]>([])
+  const [syncing, setSyncing] = useState<number | null>(null)
+
+  const loadAlbumLinks = async () => {
+    try {
+      const res = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
+      setAlbumLinks(res.data.links || [])
+    } catch { setAlbumLinks([]) }
+  }
+
+  const openAlbumPicker = async () => {
+    setShowAlbumPicker(true)
+    setAlbumsLoading(true)
+    try {
+      const res = await apiClient.get('/integrations/immich/albums')
+      setAlbums(res.data.albums || [])
+    } catch { setAlbums([]) }
+    finally { setAlbumsLoading(false) }
+  }
+
+  const linkAlbum = async (albumId: string, albumName: string) => {
+    try {
+      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links`, { album_id: albumId, album_name: albumName })
+      setShowAlbumPicker(false)
+      await loadAlbumLinks()
+      // Auto-sync after linking
+      const linksRes = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
+      const newLink = (linksRes.data.links || []).find((l: any) => l.immich_album_id === albumId)
+      if (newLink) await syncAlbum(newLink.id)
+    } catch {}
+  }
+
+  const unlinkAlbum = async (linkId: number) => {
+    try {
+      await apiClient.delete(`/integrations/immich/trips/${tripId}/album-links/${linkId}`)
+      loadAlbumLinks()
+    } catch {}
+  }
+
+  const syncAlbum = async (linkId: number) => {
+    setSyncing(linkId)
+    try {
+      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links/${linkId}/sync`)
+      await loadAlbumLinks()
+      await loadPhotos()
+    } catch {}
+    finally { setSyncing(null) }
+  }
+
+  // Lightbox
+  const [lightboxId, setLightboxId] = useState<string | null>(null)
+  const [lightboxUserId, setLightboxUserId] = useState<number | null>(null)
+  const [lightboxInfo, setLightboxInfo] = useState<any>(null)
+  const [lightboxInfoLoading, setLightboxInfoLoading] = useState(false)
+  const [lightboxOriginalSrc, setLightboxOriginalSrc] = useState('')
+
+  // ── Init ──────────────────────────────────────────────────────────────────
+
+  useEffect(() => {
+    loadInitial()
+  }, [tripId])
+
+  // WebSocket: reload photos when another user adds/removes/shares
+  useEffect(() => {
+    const handler = () => loadPhotos()
+    window.addEventListener('memories:updated', handler)
+    return () => window.removeEventListener('memories:updated', handler)
+  }, [tripId])
+
+  const loadPhotos = async () => {
+    try {
+      const photosRes = await apiClient.get(`/integrations/immich/trips/${tripId}/photos`)
+      setTripPhotos(photosRes.data.photos || [])
+    } catch {
+      setTripPhotos([])
+    }
+  }
+
+  const loadInitial = async () => {
+    setLoading(true)
+    try {
+      const statusRes = await apiClient.get('/integrations/immich/status')
+      setConnected(statusRes.data.connected)
+    } catch {
+      setConnected(false)
+    }
+    await loadPhotos()
+    await loadAlbumLinks()
+    setLoading(false)
+  }
+
+  // ── Photo Picker ──────────────────────────────────────────────────────────
+
+  const [pickerDateFilter, setPickerDateFilter] = useState(true)
+
+  const openPicker = async () => {
+    setShowPicker(true)
+    setPickerLoading(true)
+    setSelectedIds(new Set())
+    setPickerDateFilter(!!(startDate && endDate))
+    await loadPickerPhotos(!!(startDate && endDate))
+  }
+
+  const loadPickerPhotos = async (useDate: boolean) => {
+    setPickerLoading(true)
+    try {
+      const res = await apiClient.post('/integrations/immich/search', {
+        from: useDate && startDate ? startDate : undefined,
+        to: useDate && endDate ? endDate : undefined,
+      })
+      setPickerPhotos(res.data.assets || [])
+    } catch {
+      setPickerPhotos([])
+    } finally {
+      setPickerLoading(false)
+    }
+  }
+
+  const togglePickerSelect = (id: string) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const confirmSelection = () => {
+    if (selectedIds.size === 0) return
+    setShowConfirmShare(true)
+  }
+
+  const executeAddPhotos = async () => {
+    setShowConfirmShare(false)
+    try {
+      await apiClient.post(`/integrations/immich/trips/${tripId}/photos`, {
+        asset_ids: [...selectedIds],
+        shared: true,
+      })
+      setShowPicker(false)
+      loadInitial()
+    } catch {}
+  }
+
+  // ── Remove photo ──────────────────────────────────────────────────────────
+
+  const removePhoto = async (assetId: string) => {
+    try {
+      await apiClient.delete(`/integrations/immich/trips/${tripId}/photos/${assetId}`)
+      setTripPhotos(prev => prev.filter(p => p.immich_asset_id !== assetId))
+    } catch {}
+  }
+
+  // ── Toggle sharing ────────────────────────────────────────────────────────
+
+  const toggleSharing = async (assetId: string, shared: boolean) => {
+    try {
+      await apiClient.put(`/integrations/immich/trips/${tripId}/photos/${assetId}/sharing`, { shared })
+      setTripPhotos(prev => prev.map(p =>
+        p.immich_asset_id === assetId ? { ...p, shared: shared ? 1 : 0 } : p
+      ))
+    } catch {}
+  }
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+
+  const thumbnailBaseUrl = (assetId: string, userId: number) =>
+    `/api/integrations/immich/assets/${assetId}/thumbnail?userId=${userId}`
+
+  const ownPhotos = tripPhotos.filter(p => p.user_id === currentUser?.id)
+  const othersPhotos = tripPhotos.filter(p => p.user_id !== currentUser?.id && p.shared)
+  const allVisibleRaw = [...ownPhotos, ...othersPhotos]
+
+  // Unique locations for filter
+  const locations = [...new Set(allVisibleRaw.map(p => p.city).filter(Boolean) as string[])].sort()
+
+  // Apply filter + sort
+  const allVisible = allVisibleRaw
+    .filter(p => !locationFilter || p.city === locationFilter)
+    .sort((a, b) => {
+      const da = new Date(a.added_at || 0).getTime()
+      const db = new Date(b.added_at || 0).getTime()
+      return sortAsc ? da - db : db - da
+    })
+
+  const font: React.CSSProperties = {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+  }
+
+  // ── Loading ───────────────────────────────────────────────────────────────
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', ...font }}>
+        <div className="w-8 h-8 border-2 rounded-full animate-spin"
+          style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
+      </div>
+    )
+  }
+
+  // ── Not connected ─────────────────────────────────────────────────────────
+
+  if (!connected && allVisible.length === 0) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 40, textAlign: 'center', ...font }}>
+        <Camera size={40} style={{ color: 'var(--text-faint)', marginBottom: 12 }} />
+        <h3 style={{ margin: '0 0 6px', fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>
+          {t('memories.notConnected')}
+        </h3>
+        <p style={{ margin: 0, fontSize: 13, color: 'var(--text-muted)', maxWidth: 300 }}>
+          {t('memories.notConnectedHint')}
+        </p>
+      </div>
+    )
+  }
+
+  // ── Photo Picker Modal ────────────────────────────────────────────────────
+
+  // ── Album Picker Modal ──────────────────────────────────────────────────
+
+  if (showAlbumPicker) {
+    const linkedIds = new Set(albumLinks.map(l => l.immich_album_id))
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
+        <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-secondary)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
+              {t('memories.selectAlbum')}
+            </h3>
+            <button onClick={() => setShowAlbumPicker(false)}
+              style={{ padding: '7px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+              {t('common.cancel')}
+            </button>
+          </div>
+        </div>
+        <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
+          {albumsLoading ? (
+            <div style={{ textAlign: 'center', padding: 40 }}>
+              <div style={{ width: 24, height: 24, border: '2px solid var(--border-primary)', borderTopColor: 'var(--text-primary)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto' }} />
+            </div>
+          ) : albums.length === 0 ? (
+            <p style={{ textAlign: 'center', padding: 40, fontSize: 13, color: 'var(--text-faint)' }}>
+              {t('memories.noAlbums')}
+            </p>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              {albums.map(album => {
+                const isLinked = linkedIds.has(album.id)
+                return (
+                  <button key={album.id} onClick={() => !isLinked && linkAlbum(album.id, album.albumName)}
+                    disabled={isLinked}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px',
+                      borderRadius: 10, border: 'none', cursor: isLinked ? 'default' : 'pointer',
+                      background: isLinked ? 'var(--bg-tertiary)' : 'transparent', fontFamily: 'inherit', textAlign: 'left',
+                      opacity: isLinked ? 0.5 : 1,
+                    }}
+                    onMouseEnter={e => { if (!isLinked) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                    onMouseLeave={e => { if (!isLinked) e.currentTarget.style.background = 'transparent' }}
+                  >
+                    <FolderOpen size={20} color="var(--text-muted)" />
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{album.albumName}</div>
+                      <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 1 }}>
+                        {album.assetCount} {t('memories.photos')}
+                      </div>
+                    </div>
+                    {isLinked ? (
+                      <Check size={16} color="var(--text-faint)" />
+                    ) : (
+                      <Link2 size={16} color="var(--text-muted)" />
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // ── Photo Picker Modal ────────────────────────────────────────────────────
+
+  if (showPicker) {
+    const alreadyAdded = new Set(tripPhotos.filter(p => p.user_id === currentUser?.id).map(p => p.immich_asset_id))
+
+    return (
+      <>
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
+        {/* Picker header */}
+        <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-secondary)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
+            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
+              {t('memories.selectPhotos')}
+            </h3>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button onClick={() => setShowPicker(false)}
+                style={{ padding: '7px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+                {t('common.cancel')}
+              </button>
+              <button onClick={confirmSelection} disabled={selectedIds.size === 0}
+                style={{
+                  padding: '7px 14px', borderRadius: 10, border: 'none', fontSize: 12, fontWeight: 600,
+                  cursor: selectedIds.size > 0 ? 'pointer' : 'default', fontFamily: 'inherit',
+                  background: selectedIds.size > 0 ? 'var(--text-primary)' : 'var(--border-primary)',
+                  color: selectedIds.size > 0 ? 'var(--bg-primary)' : 'var(--text-faint)',
+                }}>
+                {selectedIds.size > 0 ? t('memories.addSelected', { count: selectedIds.size }) : t('memories.addPhotos')}
+              </button>
+            </div>
+          </div>
+          {/* Filter tabs */}
+          <div style={{ display: 'flex', gap: 6 }}>
+            {startDate && endDate && (
+              <button onClick={() => { if (!pickerDateFilter) { setPickerDateFilter(true); loadPickerPhotos(true) } }}
+                style={{
+                  padding: '6px 14px', borderRadius: 99, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+                  border: '1px solid', transition: 'all 0.15s',
+                  background: pickerDateFilter ? 'var(--text-primary)' : 'var(--bg-card)',
+                  borderColor: pickerDateFilter ? 'var(--text-primary)' : 'var(--border-primary)',
+                  color: pickerDateFilter ? 'var(--bg-primary)' : 'var(--text-muted)',
+                }}>
+                {t('memories.tripDates')} ({startDate ? new Date(startDate + 'T12:00:00').toLocaleDateString(undefined, { day: 'numeric', month: 'short' }) : ''} — {endDate ? new Date(endDate + 'T12:00:00').toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' }) : ''})
+              </button>
+            )}
+            <button onClick={() => { if (pickerDateFilter || !startDate) { setPickerDateFilter(false); loadPickerPhotos(false) } }}
+              style={{
+                padding: '6px 14px', borderRadius: 99, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+                border: '1px solid', transition: 'all 0.15s',
+                background: !pickerDateFilter ? 'var(--text-primary)' : 'var(--bg-card)',
+                borderColor: !pickerDateFilter ? 'var(--text-primary)' : 'var(--border-primary)',
+                color: !pickerDateFilter ? 'var(--bg-primary)' : 'var(--text-muted)',
+              }}>
+              {t('memories.allPhotos')}
+            </button>
+          </div>
+          {selectedIds.size > 0 && (
+            <p style={{ margin: '8px 0 0', fontSize: 12, fontWeight: 600, color: 'var(--text-primary)' }}>
+              {selectedIds.size} {t('memories.selected')}
+            </p>
+          )}
+        </div>
+
+        {/* Picker grid */}
+        <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
+          {pickerLoading ? (
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 60 }}>
+              <div className="w-7 h-7 border-2 rounded-full animate-spin"
+                style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
+            </div>
+          ) : pickerPhotos.length === 0 ? (
+            <div style={{ textAlign: 'center', padding: '60px 20px' }}>
+              <Camera size={36} style={{ color: 'var(--text-faint)', margin: '0 auto 10px', display: 'block' }} />
+              <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>{t('memories.noPhotos')}</p>
+            </div>
+          ) : (() => {
+            // Group photos by month
+            const byMonth: Record<string, ImmichAsset[]> = {}
+            for (const asset of pickerPhotos) {
+              const d = asset.takenAt ? new Date(asset.takenAt) : null
+              const key = d ? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}` : 'unknown'
+              if (!byMonth[key]) byMonth[key] = []
+              byMonth[key].push(asset)
+            }
+            const sortedMonths = Object.keys(byMonth).sort().reverse()
+
+            return sortedMonths.map(month => (
+              <div key={month} style={{ marginBottom: 16 }}>
+                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-muted)', marginBottom: 6, paddingLeft: 2 }}>
+                  {month !== 'unknown'
+                    ? new Date(month + '-15').toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
+                    : '—'}
+                </div>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: 4 }}>
+                  {byMonth[month].map(asset => {
+                    const isSelected = selectedIds.has(asset.id)
+                    const isAlready = alreadyAdded.has(asset.id)
+                    return (
+                      <div key={asset.id}
+                        onClick={() => !isAlready && togglePickerSelect(asset.id)}
+                        style={{
+                          position: 'relative', aspectRatio: '1', borderRadius: 8, overflow: 'hidden',
+                          cursor: isAlready ? 'default' : 'pointer',
+                          opacity: isAlready ? 0.3 : 1,
+                          outline: isSelected ? '3px solid var(--text-primary)' : 'none',
+                          outlineOffset: -3,
+                        }}>
+                        <ImmichImg baseUrl={thumbnailBaseUrl(asset.id, currentUser!.id)} loading="lazy"
+                          style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                        {isSelected && (
+                          <div style={{
+                            position: 'absolute', top: 4, right: 4, width: 22, height: 22, borderRadius: '50%',
+                            background: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                          }}>
+                            <Check size={13} color="var(--bg-primary)" />
+                          </div>
+                        )}
+                        {isAlready && (
+                          <div style={{
+                            position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            background: 'rgba(0,0,0,0.3)', fontSize: 10, color: 'white', fontWeight: 600,
+                          }}>
+                            {t('memories.alreadyAdded')}
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            ))
+          })()}
+        </div>
+      </div>
+
+      {/* Confirm share popup (inside picker) */}
+      {showConfirmShare && (
+        <div onClick={() => setShowConfirmShare(false)}
+          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
+          <div onClick={e => e.stopPropagation()}
+            style={{ background: 'var(--bg-card)', borderRadius: 16, padding: 24, maxWidth: 360, width: '100%', boxShadow: '0 16px 48px rgba(0,0,0,0.2)', textAlign: 'center' }}>
+            <Share2 size={28} style={{ color: 'var(--text-primary)', marginBottom: 12 }} />
+            <h3 style={{ margin: '0 0 8px', fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>
+              {t('memories.confirmShareTitle')}
+            </h3>
+            <p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>
+              {t('memories.confirmShareHint', { count: selectedIds.size })}
+            </p>
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
+              <button onClick={() => setShowConfirmShare(false)}
+                style={{ padding: '8px 20px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+                {t('common.cancel')}
+              </button>
+              <button onClick={executeAddPhotos}
+                style={{ padding: '8px 20px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
+                {t('memories.confirmShareButton')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+    )
+  }
+
+  // ── Main Gallery ──────────────────────────────────────────────────────────
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
+
+      {/* Header */}
+      <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-secondary)', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <div>
+            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>
+              {t('memories.title')}
+            </h2>
+            <p style={{ margin: '2px 0 0', fontSize: 12, color: 'var(--text-faint)' }}>
+              {allVisible.length} {t('memories.photosFound')}
+              {othersPhotos.length > 0 && ` · ${othersPhotos.length} ${t('memories.fromOthers')}`}
+            </p>
+          </div>
+          {connected && (
+            <div style={{ display: 'flex', gap: 6 }}>
+              <button onClick={openAlbumPicker}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 5, padding: '7px 14px', borderRadius: 10,
+                  border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-muted)',
+                  fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
+                }}>
+                <Link2 size={13} /> {t('memories.linkAlbum')}
+              </button>
+              <button onClick={openPicker}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 5, padding: '7px 14px', borderRadius: 10,
+                  border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)',
+                  fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+                }}>
+                <Plus size={14} /> {t('memories.addPhotos')}
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Linked Albums */}
+        {albumLinks.length > 0 && (
+          <div style={{ padding: '8px 20px', borderBottom: '1px solid var(--border-secondary)', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+            {albumLinks.map(link => (
+              <div key={link.id} style={{
+                display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 8,
+                background: 'var(--bg-tertiary)', fontSize: 11, color: 'var(--text-muted)',
+              }}>
+                <FolderOpen size={11} />
+                <span style={{ fontWeight: 500 }}>{link.album_name}</span>
+                {link.username !== currentUser?.username && <span style={{ color: 'var(--text-faint)' }}>({link.username})</span>}
+                <button onClick={() => syncAlbum(link.id)} disabled={syncing === link.id} title={t('memories.syncAlbum')}
+                  style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex', color: 'var(--text-faint)' }}>
+                  <RefreshCw size={11} style={{ animation: syncing === link.id ? 'spin 1s linear infinite' : 'none' }} />
+                </button>
+                {link.user_id === currentUser?.id && (
+                  <button onClick={() => unlinkAlbum(link.id)} title={t('memories.unlinkAlbum')}
+                    style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex', color: 'var(--text-faint)' }}>
+                    <X size={11} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Filter & Sort bar */}
+      {allVisibleRaw.length > 0 && (
+        <div style={{ display: 'flex', gap: 6, padding: '8px 20px', borderBottom: '1px solid var(--border-secondary)', flexShrink: 0, flexWrap: 'wrap' }}>
+          <button onClick={() => setSortAsc(v => !v)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px', borderRadius: 8,
+              border: '1px solid var(--border-primary)', background: 'var(--bg-card)',
+              fontSize: 11, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)',
+            }}>
+            <ArrowUpDown size={11} /> {sortAsc ? t('memories.oldest') : t('memories.newest')}
+          </button>
+          {locations.length > 1 && (
+            <select value={locationFilter} onChange={e => setLocationFilter(e.target.value)}
+              style={{
+                padding: '4px 10px', borderRadius: 8, border: '1px solid var(--border-primary)',
+                background: 'var(--bg-card)', fontSize: 11, fontFamily: 'inherit', color: 'var(--text-muted)',
+                cursor: 'pointer', outline: 'none',
+              }}>
+              <option value="">{t('memories.allLocations')}</option>
+              {locations.map(loc => <option key={loc} value={loc}>{loc}</option>)}
+            </select>
+          )}
+        </div>
+      )}
+
+      {/* Gallery */}
+      <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
+        {allVisible.length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '60px 20px' }}>
+            <Camera size={40} style={{ color: 'var(--text-faint)', margin: '0 auto 12px', display: 'block' }} />
+            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>
+              {t('memories.noPhotos')}
+            </p>
+            <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '0 0 16px' }}>
+              {t('memories.noPhotosHint')}
+            </p>
+            <button onClick={openPicker}
+              style={{
+                display: 'inline-flex', alignItems: 'center', gap: 5, padding: '9px 18px', borderRadius: 10,
+                border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)',
+                fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+              }}>
+              <Plus size={15} /> {t('memories.addPhotos')}
+            </button>
+          </div>
+        ) : (
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))', gap: 6 }}>
+            {allVisible.map(photo => {
+              const isOwn = photo.user_id === currentUser?.id
+              return (
+                <div key={photo.immich_asset_id} className="group"
+                  style={{ position: 'relative', aspectRatio: '1', borderRadius: 10, overflow: 'visible', cursor: 'pointer' }}
+                  onClick={() => {
+                    setLightboxId(photo.immich_asset_id); setLightboxUserId(photo.user_id); setLightboxInfo(null)
+                    setLightboxOriginalSrc('')
+                    getAuthUrl(`/api/integrations/immich/assets/${photo.immich_asset_id}/original?userId=${photo.user_id}`, 'immich').then(setLightboxOriginalSrc)
+                    setLightboxInfoLoading(true)
+                    apiClient.get(`/integrations/immich/assets/${photo.immich_asset_id}/info?userId=${photo.user_id}`)
+                      .then(r => setLightboxInfo(r.data)).catch(() => {}).finally(() => setLightboxInfoLoading(false))
+                  }}>
+
+                  <ImmichImg baseUrl={thumbnailBaseUrl(photo.immich_asset_id, photo.user_id)} loading="lazy"
+                    style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10 }} />
+
+                  {/* Other user's avatar */}
+                  {!isOwn && (
+                    <div className="memories-avatar" style={{ position: 'absolute', bottom: 6, left: 6, zIndex: 10 }}>
+                      <div style={{
+                        width: 22, height: 22, borderRadius: '50%',
+                        background: `hsl(${photo.username.charCodeAt(0) * 37 % 360}, 55%, 55%)`,
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        fontSize: 10, fontWeight: 700, color: 'white', textTransform: 'uppercase',
+                        border: '2px solid white', boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
+                      }}>
+                        {photo.username[0]}
+                      </div>
+                      <div className="memories-avatar-tooltip" style={{
+                        position: 'absolute', bottom: '100%', left: '50%', transform: 'translateX(-50%)',
+                        marginBottom: 6, padding: '3px 8px', borderRadius: 6,
+                        background: 'var(--text-primary)', color: 'var(--bg-primary)',
+                        fontSize: 10, fontWeight: 600, whiteSpace: 'nowrap',
+                        pointerEvents: 'none', opacity: 0, transition: 'opacity 0.15s',
+                      }}>
+                        {photo.username}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Own photo actions (hover) */}
+                  {isOwn && (
+                    <div className="opacity-0 group-hover:opacity-100"
+                      style={{ position: 'absolute', top: 4, right: 4, display: 'flex', gap: 3, transition: 'opacity 0.15s' }}>
+                      <button onClick={e => { e.stopPropagation(); toggleSharing(photo.immich_asset_id, !photo.shared) }}
+                        title={photo.shared ? t('memories.stopSharing') : t('memories.sharePhotos')}
+                        style={{
+                          width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer',
+                          background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        }}>
+                        {photo.shared ? <Eye size={12} color="white" /> : <EyeOff size={12} color="white" />}
+                      </button>
+                      <button onClick={e => { e.stopPropagation(); removePhoto(photo.immich_asset_id) }}
+                        style={{
+                          width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer',
+                          background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        }}>
+                        <X size={12} color="white" />
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Not shared indicator */}
+                  {isOwn && !photo.shared && (
+                    <div style={{
+                      position: 'absolute', bottom: 6, right: 6, padding: '2px 6px', borderRadius: 6,
+                      background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
+                      fontSize: 9, color: 'rgba(255,255,255,0.7)', fontWeight: 500,
+                    }}>
+                      <EyeOff size={9} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />
+                      {t('memories.private')}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        .memories-avatar:hover .memories-avatar-tooltip { opacity: 1 !important; }
+      `}</style>
+
+      {/* Confirm share popup */}
+      {showConfirmShare && (
+        <div onClick={() => setShowConfirmShare(false)}
+          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
+          <div onClick={e => e.stopPropagation()}
+            style={{ background: 'var(--bg-card)', borderRadius: 16, padding: 24, maxWidth: 360, width: '100%', boxShadow: '0 16px 48px rgba(0,0,0,0.2)', textAlign: 'center' }}>
+            <Share2 size={28} style={{ color: 'var(--text-primary)', marginBottom: 12 }} />
+            <h3 style={{ margin: '0 0 8px', fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>
+              {t('memories.confirmShareTitle')}
+            </h3>
+            <p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>
+              {t('memories.confirmShareHint', { count: selectedIds.size })}
+            </p>
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
+              <button onClick={() => setShowConfirmShare(false)}
+                style={{ padding: '8px 20px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+                {t('common.cancel')}
+              </button>
+              <button onClick={executeAddPhotos}
+                style={{ padding: '8px 20px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
+                {t('memories.confirmShareButton')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Lightbox */}
+      {lightboxId && lightboxUserId && (
+        <div onClick={() => { setLightboxId(null); setLightboxUserId(null) }}
+          style={{
+            position: 'absolute', inset: 0, zIndex: 100,
+            background: 'rgba(0,0,0,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}>
+          <button onClick={() => { setLightboxId(null); setLightboxUserId(null) }}
+            style={{
+              position: 'absolute', top: 16, right: 16, width: 40, height: 40, borderRadius: '50%',
+              background: 'rgba(255,255,255,0.1)', border: 'none', cursor: 'pointer',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}>
+            <X size={20} color="white" />
+          </button>
+          <div onClick={e => e.stopPropagation()} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', justifyContent: 'center', padding: 20, width: '100%', height: '100%' }}>
+            <img
+              src={lightboxOriginalSrc}
+              alt=""
+              style={{ maxWidth: lightboxInfo ? 'calc(100% - 280px)' : '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 10, cursor: 'default' }}
+            />
+
+            {/* Info panel — liquid glass */}
+            {lightboxInfo && (
+              <div style={{
+                width: 240, flexShrink: 0, borderRadius: 16, padding: 18,
+                background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                border: '1px solid rgba(255,255,255,0.12)', color: 'white',
+                display: 'flex', flexDirection: 'column', gap: 14, maxHeight: '100%', overflowY: 'auto',
+              }}>
+                {/* Date */}
+                {lightboxInfo.takenAt && (
+                  <div>
+                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Date</div>
+                    <div style={{ fontSize: 13, fontWeight: 600 }}>{new Date(lightboxInfo.takenAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })}</div>
+                    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{new Date(lightboxInfo.takenAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</div>
+                  </div>
+                )}
+
+                {/* Location */}
+                {(lightboxInfo.city || lightboxInfo.country) && (
+                  <div>
+                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>
+                      <MapPin size={9} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />Location
+                    </div>
+                    <div style={{ fontSize: 13, fontWeight: 600 }}>
+                      {[lightboxInfo.city, lightboxInfo.state, lightboxInfo.country].filter(Boolean).join(', ')}
+                    </div>
+                  </div>
+                )}
+
+                {/* Camera */}
+                {lightboxInfo.camera && (
+                  <div>
+                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Camera</div>
+                    <div style={{ fontSize: 12, fontWeight: 500 }}>{lightboxInfo.camera}</div>
+                    {lightboxInfo.lens && <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{lightboxInfo.lens}</div>}
+                  </div>
+                )}
+
+                {/* Settings */}
+                {(lightboxInfo.focalLength || lightboxInfo.aperture || lightboxInfo.iso) && (
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+                    {lightboxInfo.focalLength && (
+                      <div>
+                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Focal</div>
+                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.focalLength}</div>
+                      </div>
+                    )}
+                    {lightboxInfo.aperture && (
+                      <div>
+                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Aperture</div>
+                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.aperture}</div>
+                      </div>
+                    )}
+                    {lightboxInfo.shutter && (
+                      <div>
+                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Shutter</div>
+                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.shutter}</div>
+                      </div>
+                    )}
+                    {lightboxInfo.iso && (
+                      <div>
+                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>ISO</div>
+                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.iso}</div>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Resolution & File */}
+                {(lightboxInfo.width || lightboxInfo.fileName) && (
+                  <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 10 }}>
+                    {lightboxInfo.width && lightboxInfo.height && (
+                      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>{lightboxInfo.width} × {lightboxInfo.height}</div>
+                    )}
+                    {lightboxInfo.fileSize && (
+                      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>{(lightboxInfo.fileSize / 1024 / 1024).toFixed(1)} MB</div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {lightboxInfoLoading && (
+              <div style={{ width: 240, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <div className="w-6 h-6 border-2 rounded-full animate-spin" style={{ borderColor: 'rgba(255,255,255,0.2)', borderTopColor: 'white' }} />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/PDF/TripPDF.tsx

@@ -12,6 +12,13 @@ function noteIconSvg(iconId) {
   return _renderToStaticMarkup(createElement(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' }))
 }
 
+const TRANSPORT_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship }
+function transportIconSvg(type) {
+  if (!_renderToStaticMarkup) return ''
+  const Icon = TRANSPORT_ICON_MAP[type] || Ticket
+  return _renderToStaticMarkup(createElement(Icon, { size: 14, strokeWidth: 1.8, color: '#3b82f6' }))
+}
+
 // ── SVG inline icons (for chips) ─────────────────────────────────────────────
 const svgPin   = `<svg width="11" height="11" viewBox="0 0 24 24" fill="#94a3b8" style="flex-shrink:0;margin-top:1px"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5" fill="white"/></svg>`
 const svgClock = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
@@ -96,13 +103,14 @@ interface downloadTripPDFProps {
   assignments: AssignmentsMap
   categories: Category[]
   dayNotes: DayNotesMap
+  reservations?: any[]
   t: (key: string, params?: Record<string, string | number>) => string
   locale: string
 }
 
-export async function downloadTripPDF({ trip, days, places, assignments, categories, dayNotes, t: _t, locale: _locale }: downloadTripPDFProps) {
+export async function downloadTripPDF({ trip, days, places, assignments, categories, dayNotes, reservations = [], t: _t, locale: _locale }: downloadTripPDFProps) {
   await ensureRenderer()
-  const loc = _locale || 'de-DE'
+  const loc = _locale || undefined
   const tr = _t || (k => k)
   const sorted = [...(days || [])].sort((a, b) => a.day_number - b.day_number)
   const range = longDateRange(sorted, loc)
@@ -123,15 +131,46 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
     const notes = (dayNotes || []).filter(n => n.day_id === day.id)
     const cost = dayCost(assignments, day.id, loc)
 
+    // Transport bookings for this day
+    const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
+    const dayTransport = (reservations || []).filter(r => {
+      if (!r.reservation_time || !TRANSPORT_TYPES.has(r.type)) return false
+      return day.date && r.reservation_time.split('T')[0] === day.date
+    })
+
     const merged = []
     assigned.forEach(a => merged.push({ type: 'place', k: a.order_index ?? a.sort_order ?? 0, data: a }))
     notes.forEach(n    => merged.push({ type: 'note',  k: n.sort_order ?? 0, data: n }))
+    dayTransport.forEach(r => {
+      const pos = r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
+      merged.push({ type: 'transport', k: pos, data: r })
+    })
     merged.sort((a, b) => a.k - b.k)
 
     let pi = 0
     const itemsHtml = merged.length === 0
       ? `<div class="empty-day">${escHtml(tr('dayplan.emptyDay'))}</div>`
       : merged.map(item => {
+          if (item.type === 'transport') {
+            const r = item.data
+            const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
+            const icon = transportIconSvg(r.type)
+            let subtitle = ''
+            if (r.type === 'flight') subtitle = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+            else if (r.type === 'train') subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : ''].filter(Boolean).join(' · ')
+            const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
+            return `
+              <div class="note-card" style="border-left: 3px solid #3b82f6;">
+                <div class="note-line" style="background: #3b82f6;"></div>
+                <span class="note-icon">${icon}</span>
+                <div class="note-body">
+                  <div class="note-text" style="font-weight: 600;">${escHtml(r.title)}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
+                  ${subtitle ? `<div class="note-time">${escHtml(subtitle)}</div>` : ''}
+                  ${r.confirmation_number ? `<div class="note-time" style="font-size:9px;">Code: ${escHtml(r.confirmation_number)}</div>` : ''}
+                </div>
+              </div>`
+          }
+
           if (item.type === 'note') {
             const note = item.data
             return `
@@ -165,7 +204,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
 
           const chips = [
             place.place_time ? `<span class="chip">${svgClock}${escHtml(place.place_time)}</span>` : '',
-            place.price && parseFloat(place.price) > 0 ? `<span class="chip chip-green">${svgEuro}${Number(place.price).toLocaleString('de-DE')} EUR</span>` : '',
+            place.price && parseFloat(place.price) > 0 ? `<span class="chip chip-green">${svgEuro}${Number(place.price).toLocaleString(loc)} EUR</span>` : '',
           ].filter(Boolean).join('')
 
           return `
@@ -377,7 +416,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
         <div class="cover-stat-lbl">${escHtml(tr('pdf.planned'))}</div>
       </div>
       ${totalCost > 0 ? `<div>
-        <div class="cover-stat-num">${totalCost.toLocaleString('de-DE')}</div>
+        <div class="cover-stat-num">${totalCost.toLocaleString(loc)}</div>
         <div class="cover-stat-lbl">${escHtml(tr('pdf.costLabel'))}</div>
       </div>` : ''}
     </div>

client/src/components/Photos/PhotoGallery.tsx

@@ -3,7 +3,7 @@ import { PhotoLightbox } from './PhotoLightbox'
 import { PhotoUpload } from './PhotoUpload'
 import { Upload, Camera } from 'lucide-react'
 import Modal from '../shared/Modal'
-import { useTranslation } from '../../i18n'
+import { getLocaleForLanguage, useTranslation } from '../../i18n'
 import type { Photo, Place, Day } from '../../types'
 
 interface PhotoGalleryProps {
@@ -17,7 +17,7 @@ interface PhotoGalleryProps {
 }
 
 export default function PhotoGallery({ photos, onUpload, onDelete, onUpdate, places, days, tripId }: PhotoGalleryProps) {
-  const { t } = useTranslation()
+  const { t, language } = useTranslation()
   const [lightboxIndex, setLightboxIndex] = useState(null)
   const [showUpload, setShowUpload] = useState(false)
   const [filterDayId, setFilterDayId] = useState('')
@@ -53,7 +53,7 @@ export default function PhotoGallery({ photos, onUpload, onDelete, onUpdate, pla
         <div style={{ marginRight: 'auto' }}>
           <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#111827' }}>Fotos</h2>
           <p style={{ margin: '2px 0 0', fontSize: 12.5, color: '#9ca3af' }}>
-            {photos.length} Foto{photos.length !== 1 ? 's' : ''}
+            {photos.length} {photos.length !== 1 ? 'Fotos' : 'Foto'}
           </p>
         </div>
 
@@ -65,7 +65,7 @@ export default function PhotoGallery({ photos, onUpload, onDelete, onUpdate, pla
           <option value="">{t('photos.allDays')}</option>
           {(days || []).map(day => (
             <option key={day.id} value={day.id}>
-              Tag {day.day_number}{day.date ? ` · ${formatDate(day.date)}` : ''}
+              {t('planner.dayN', { n: day.day_number })}{day.date ? ` · ${formatDate(day.date, getLocaleForLanguage(language))}` : ''}
             </option>
           ))}
         </select>
@@ -84,7 +84,7 @@ export default function PhotoGallery({ photos, onUpload, onDelete, onUpdate, pla
           className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium whitespace-nowrap"
         >
           <Upload className="w-4 h-4" />
-          Fotos hochladen
+          {t('common.upload')}
         </button>
       </div>
 
@@ -101,7 +101,7 @@ export default function PhotoGallery({ photos, onUpload, onDelete, onUpdate, pla
               style={{ display: 'inline-flex', margin: '0 auto' }}
             >
               <Upload className="w-4 h-4" />
-              Fotos hochladen
+              {t('common.upload')}
             </button>
           </div>
         ) : (
@@ -146,7 +146,7 @@ export default function PhotoGallery({ photos, onUpload, onDelete, onUpdate, pla
       <Modal
         isOpen={showUpload}
         onClose={() => setShowUpload(false)}
-        title="Fotos hochladen"
+        title={t('common.upload')}
         size="lg"
       >
         <PhotoUpload
@@ -211,7 +211,7 @@ function PhotoThumbnail({ photo, days, places, onClick }: PhotoThumbnailProps) {
   )
 }
 
-function formatDate(dateStr) {
+function formatDate(dateStr, locale) {
   if (!dateStr) return ''
-  return new Date(dateStr + 'T00:00:00').toLocaleDateString('de-DE', { day: 'numeric', month: 'short' })
+  return new Date(dateStr + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short' })
 }

client/src/components/Photos/PhotoLightbox.tsx

@@ -227,10 +227,10 @@ export function PhotoLightbox({ photos, initialIndex, onClose, onUpdate, onDelet
   )
 }
 
-function formatDate(dateStr) {
+function formatDate(dateStr, locale = 'en-US') {
   if (!dateStr) return ''
   try {
-    return new Date(dateStr).toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric' })
+    return new Date(dateStr).toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' })
   } catch { return '' }
 }
 

client/src/components/Planner/DayDetailPanel.tsx

@@ -5,10 +5,12 @@ import { X, Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind
 const RES_TYPE_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
 const RES_TYPE_COLORS = { flight: '#3b82f6', hotel: '#8b5cf6', restaurant: '#ef4444', train: '#06b6d4', car: '#6b7280', cruise: '#0ea5e9', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
 import { weatherApi, accommodationsApi } from '../../api/client'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import { useSettingsStore } from '../../store/settingsStore'
-import { useTranslation } from '../../i18n'
+import { getLocaleForLanguage, useTranslation } from '../../i18n'
 import type { Day, Place, Category, Reservation, AssignmentsMap } from '../../types'
 
 const WEATHER_ICON_MAP = {
@@ -50,12 +52,18 @@ interface DayDetailPanelProps {
   lng: number | null
   onClose: () => void
   onAccommodationChange: () => void
+  leftWidth?: number
+  rightWidth?: number
 }
 
-export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange }: DayDetailPanelProps) {
-  const { t, language } = useTranslation()
+export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0 }: DayDetailPanelProps) {
+  const { t, language, locale } = useTranslation()
+  const can = useCanDo()
+  const tripObj = useTripStore((s) => s.trip)
+  const canEditDays = can('day_edit', tripObj)
   const isFahrenheit = useSettingsStore(s => s.settings.temperature_unit) === 'fahrenheit'
   const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+  const blurCodes = useSettingsStore(s => s.settings.blur_booking_codes)
   const fmtTime = (v) => formatTime12(v, is12h)
   const unit = isFahrenheit ? '°F' : '°C'
   const [weather, setWeather] = useState(null)
@@ -108,8 +116,13 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
         check_out: hotelForm.check_out || null,
         confirmation: hotelForm.confirmation || null,
       })
-      setAccommodation(data.accommodation)
-      setAccommodations(prev => [...prev, data.accommodation])
+      const newAcc = data.accommodation
+      const updated = [...accommodations, newAcc]
+      setAccommodations(updated)
+      setAccommodation(newAcc)
+      setDayAccommodations(updated.filter(a =>
+        days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+      ))
       setShowHotelPicker(false)
       setHotelForm({ check_in: '', check_out: '', confirmation: '', place_id: null })
       onAccommodationChange?.()
@@ -129,7 +142,11 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
     if (!accommodation) return
     try {
       await accommodationsApi.delete(tripId, accommodation.id)
-      setAccommodations(prev => prev.filter(a => a.id !== accommodation.id))
+      const updated = accommodations.filter(a => a.id !== accommodation.id)
+      setAccommodations(updated)
+      setDayAccommodations(updated.filter(a =>
+        days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+      ))
       setAccommodation(null)
       onAccommodationChange?.()
     } catch {}
@@ -138,7 +155,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   if (!day) return null
 
   const formattedDate = day.date ? new Date(day.date + 'T00:00:00').toLocaleDateString(
-    language === 'de' ? 'de-DE' : 'en-US',
+    getLocaleForLanguage(language),
     { weekday: 'long', day: 'numeric', month: 'long' }
   ) : null
 
@@ -146,7 +163,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
 
   return (
-    <div style={{ position: 'fixed', bottom: 20, left: '50%', transform: 'translateX(-50%)', width: 'min(800px, calc(100vw - 32px))', zIndex: 50, ...font }}>
+    <div style={{ position: 'fixed', bottom: 20, left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, zIndex: 50, ...font }}>
       <div style={{
         background: 'var(--bg-elevated)',
         backdropFilter: 'blur(40px) saturate(180%)',
@@ -270,7 +287,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                         </div>
                         {r.reservation_time?.includes('T') && (
                           <span style={{ fontSize: 10, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
-                            {new Date(r.reservation_time).toLocaleTimeString(language === 'de' ? 'de-DE' : 'en-US', { hour: '2-digit', minute: '2-digit', hour12: is12h })}
+                            {new Date(r.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })}
                             {r.reservation_end_time && ` – ${fmtTime(r.reservation_end_time)}`}
                           </span>
                         )}
@@ -325,13 +342,13 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                           <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_name}</div>
                           {acc.place_address && <div style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_address}</div>}
                         </div>
-                        <button onClick={() => { setAccommodation(acc); setHotelForm({ check_in: acc.check_in || '', check_out: acc.check_out || '', confirmation: acc.confirmation || '', place_id: acc.place_id }); setHotelDayRange({ start: acc.start_day_id, end: acc.end_day_id }); setShowHotelPicker('edit') }}
+                        {canEditDays && <button onClick={() => { setAccommodation(acc); setHotelForm({ check_in: acc.check_in || '', check_out: acc.check_out || '', confirmation: acc.confirmation || '', place_id: acc.place_id }); setHotelDayRange({ start: acc.start_day_id, end: acc.end_day_id }); setShowHotelPicker('edit') }}
                           style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
                           <Pencil size={12} style={{ color: 'var(--text-faint)' }} />
-                        </button>
-                        <button onClick={() => { setAccommodation(acc); handleRemoveAccommodation() }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
+                        </button>}
+                        {canEditDays && <button onClick={() => { setAccommodation(acc); handleRemoveAccommodation() }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
                           <X size={12} style={{ color: 'var(--text-faint)' }} />
-                        </button>
+                        </button>}
                       </div>
                       {/* Details grid */}
                       <div style={{ display: 'flex', gap: 0, margin: '0 12px 8px', borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border-faint)' }}>
@@ -368,7 +385,12 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                             <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{linked.title}</div>
                             <div style={{ fontSize: 9, color: 'var(--text-faint)', display: 'flex', gap: 6, marginTop: 1 }}>
                               <span>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
-                              {linked.confirmation_number && <span>#{linked.confirmation_number}</span>}
+                              {linked.confirmation_number && <span
+                                onMouseEnter={e => { if (blurCodes) e.currentTarget.style.filter = 'none' }}
+                                onMouseLeave={e => { if (blurCodes) e.currentTarget.style.filter = 'blur(4px)' }}
+                                onClick={e => { if (blurCodes) { const el = e.currentTarget; el.style.filter = el.style.filter === 'none' ? 'blur(4px)' : 'none' } }}
+                                style={{ filter: blurCodes ? 'blur(4px)' : 'none', transition: 'filter 0.2s', cursor: blurCodes ? 'pointer' : 'default' }}
+                              >#{linked.confirmation_number}</span>}
                             </div>
                           </div>
                         </div>
@@ -377,22 +399,22 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                   )
                 })}
                 {/* Add another hotel */}
-                <button onClick={() => setShowHotelPicker(true)} style={{
+                {canEditDays && <button onClick={() => setShowHotelPicker(true)} style={{
                   width: '100%', padding: 8, border: '1.5px dashed var(--border-primary)', borderRadius: 10,
                   background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
                   fontSize: 10, color: 'var(--text-faint)', fontFamily: 'inherit',
                 }}>
                   <Hotel size={10} /> {t('day.addAccommodation')}
-                </button>
+                </button>}
               </div>
             ) : (
-              <button onClick={() => setShowHotelPicker(true)} style={{
+              canEditDays ? <button onClick={() => setShowHotelPicker(true)} style={{
                 width: '100%', padding: 10, border: '1.5px dashed var(--border-primary)', borderRadius: 10,
                 background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
                 fontSize: 11, color: 'var(--text-faint)', fontFamily: 'inherit',
               }}>
                 <Hotel size={12} /> {t('day.addAccommodation')}
-              </button>
+              </button> : null
             )}
 
             {/* Hotel Picker Popup — portal to body to escape transform stacking context */}
@@ -423,7 +445,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                           onChange={v => setHotelDayRange(prev => ({ start: v, end: Math.max(v, prev.end) }))}
                           options={days.map((d, i) => ({
                             value: d.id,
-                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00').toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { day: 'numeric', month: 'short' })}` : ''}`,
+                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short' })}` : ''}`,
                           }))}
                           size="sm"
                         />
@@ -435,7 +457,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                           onChange={v => setHotelDayRange(prev => ({ start: Math.min(prev.start, v), end: v }))}
                           options={days.map((d, i) => ({
                             value: d.id,
-                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00').toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { day: 'numeric', month: 'short' })}` : ''}`,
+                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short' })}` : ''}`,
                           }))}
                           size="sm"
                         />
@@ -541,8 +563,12 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                       setHotelForm({ check_in: '', check_out: '', confirmation: '', place_id: null })
                       // Reload
                       accommodationsApi.list(tripId).then(d => {
-                        setAccommodations(d.accommodations || [])
-                        const acc = (d.accommodations || []).find(a => days.some(dd => dd.id >= a.start_day_id && dd.id <= a.end_day_id && dd.id === day?.id))
+                        const all = d.accommodations || []
+                        setAccommodations(all)
+                        setDayAccommodations(all.filter(a =>
+                          days.some(dd => dd.id >= a.start_day_id && dd.id <= a.end_day_id && dd.id === day?.id)
+                        ))
+                        const acc = all.find(a => days.some(dd => dd.id >= a.start_day_id && dd.id <= a.end_day_id && dd.id === day?.id))
                         setAccommodation(acc || null)
                       })
                       onAccommodationChange?.()

client/src/components/Planner/PlaceFormModal.tsx

@@ -3,6 +3,8 @@ import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import { mapsApi } from '../../api/client'
 import { useAuthStore } from '../../store/authStore'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { Search, Paperclip, X, AlertTriangle } from 'lucide-react'
 import { useTranslation } from '../../i18n'
@@ -66,6 +68,9 @@ export default function PlaceFormModal({
   const toast = useToast()
   const { t, language } = useTranslation()
   const { hasMapsKey } = useAuthStore()
+  const can = useCanDo()
+  const tripObj = useTripStore((s) => s.trip)
+  const canUploadFiles = can('file_upload', tripObj)
 
   useEffect(() => {
     if (place) {
@@ -104,6 +109,24 @@ export default function PlaceFormModal({
     if (!mapsSearch.trim()) return
     setIsSearchingMaps(true)
     try {
+      // Detect Google Maps URLs and resolve them directly
+      const trimmed = mapsSearch.trim()
+      if (trimmed.match(/^https?:\/\/(www\.)?(google\.[a-z.]+\/maps|maps\.google\.[a-z.]+|maps\.app\.goo\.gl|goo\.gl)/i)) {
+        const resolved = await mapsApi.resolveUrl(trimmed)
+        if (resolved.lat && resolved.lng) {
+          setForm(prev => ({
+            ...prev,
+            name: resolved.name || prev.name,
+            address: resolved.address || prev.address,
+            lat: String(resolved.lat),
+            lng: String(resolved.lng),
+          }))
+          setMapsResults([])
+          setMapsSearch('')
+          toast.success(t('places.urlResolved'))
+          return
+        }
+      }
       const result = await mapsApi.search(mapsSearch, language)
       setMapsResults(result.places || [])
     } catch (err: unknown) {
@@ -153,6 +176,7 @@ export default function PlaceFormModal({
 
   // Paste support for files/images
   const handlePaste = (e) => {
+    if (!canUploadFiles) return
     const items = e.clipboardData?.items
     if (!items) return
     for (const item of Array.from(items)) {
@@ -281,6 +305,15 @@ export default function PlaceFormModal({
               step="any"
               value={form.lat}
               onChange={e => handleChange('lat', e.target.value)}
+              onPaste={e => {
+                const text = e.clipboardData.getData('text').trim()
+                const match = text.match(/^(-?\d+\.?\d*)\s*[,;\s]\s*(-?\d+\.?\d*)$/)
+                if (match) {
+                  e.preventDefault()
+                  handleChange('lat', match[1])
+                  handleChange('lng', match[2])
+                }
+              }}
               placeholder={t('places.formLat')}
               className="form-input"
             />
@@ -359,7 +392,7 @@ export default function PlaceFormModal({
         </div>
 
         {/* File Attachments */}
-        {true && (
+        {canUploadFiles && (
           <div className="border border-gray-200 rounded-xl p-3 space-y-2">
             <div className="flex items-center justify-between">
               <label className="block text-sm font-medium text-gray-700">{t('files.title')}</label>

client/src/components/Planner/PlaceInspector.tsx

@@ -1,5 +1,8 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-import { X, Clock, MapPin, ExternalLink, Phone, Euro, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Users } from 'lucide-react'
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { getAuthUrl } from '../../api/authUrl'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { X, Clock, MapPin, ExternalLink, Phone, Euro, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Users, Mountain, TrendingUp } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { mapsApi } from '../../api/client'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -116,16 +119,19 @@ interface PlaceInspectorProps {
   onAssignToDay: (placeId: number, dayId: number) => void
   onRemoveAssignment: (assignmentId: number, dayId: number) => void
   files: TripFile[]
-  onFileUpload: (fd: FormData) => Promise<void>
+  onFileUpload?: (fd: FormData) => Promise<void>
   tripMembers?: TripMember[]
   onSetParticipants: (assignmentId: number, dayId: number, participantIds: number[]) => void
   onUpdatePlace: (placeId: number, data: Partial<Place>) => void
+  leftWidth?: number
+  rightWidth?: number
 }
 
 export default function PlaceInspector({
   place, categories, days, selectedDayId, selectedAssignmentId, assignments, reservations = [],
   onClose, onEdit, onDelete, onAssignToDay, onRemoveAssignment,
   files, onFileUpload, tripMembers = [], onSetParticipants, onUpdatePlace,
+  leftWidth = 0, rightWidth = 0,
 }: PlaceInspectorProps) {
   const { t, locale, language } = useTranslation()
   const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
@@ -169,7 +175,7 @@ export default function PlaceInspector({
   const selectedDay = days?.find(d => d.id === selectedDayId)
   const weekdayIndex = getWeekdayIndex(selectedDay?.date)
 
-  const placeFiles = (files || []).filter(f => String(f.place_id) === String(place.id))
+  const placeFiles = (files || []).filter(f => String(f.place_id) === String(place.id) || (f.linked_place_ids || []).includes(place.id))
 
   const handleFileUpload = useCallback(async (e) => {
     const selectedFiles = Array.from((e.target as HTMLInputElement).files || [])
@@ -196,9 +202,9 @@ export default function PlaceInspector({
       style={{
         position: 'absolute',
         bottom: 20,
-        left: '50%',
+        left: `calc(${leftWidth}px + (100% - ${leftWidth}px - ${rightWidth}px) / 2)`,
         transform: 'translateX(-50%)',
-        width: 'min(800px, calc(100vw - 32px))',
+        width: `min(800px, calc(100% - ${leftWidth}px - ${rightWidth}px - 32px))`,
         zIndex: 50,
         fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
       }}
@@ -312,7 +318,7 @@ export default function PlaceInspector({
                   icon={<Star size={12} fill="#facc15" color="#facc15" />}
                   text={<>
                     {googleDetails.rating.toFixed(1)}
-                    {googleDetails.rating_count ? <span style={{ opacity: 0.5 }}> ({googleDetails.rating_count.toLocaleString('de-DE')})</span> : ''}
+                    {googleDetails.rating_count ? <span style={{ opacity: 0.5 }}> ({googleDetails.rating_count.toLocaleString(locale)})</span> : ''}
                     {shortReview && <span className="hidden md:inline" style={{ opacity: 0.6, fontWeight: 400, fontStyle: 'italic', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> · „{shortReview.text}"</span>}
                   </>}
                   color="var(--text-secondary)" bg="var(--bg-hover)"
@@ -336,10 +342,8 @@ export default function PlaceInspector({
 
           {/* Description / Summary */}
           {(place.description || place.notes || googleDetails?.summary) && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0, lineHeight: '1.5', padding: '8px 12px' }}>
-                {place.description || place.notes || googleDetails?.summary}
-              </p>
+            <div className="collab-note-md" style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden', fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.5', padding: '8px 12px' }}>
+              <Markdown remarkPlugins={[remarkGfm]}>{place.description || place.notes || googleDetails?.summary || ''}</Markdown>
             </div>
           )}
 
@@ -388,7 +392,7 @@ export default function PlaceInspector({
                           </div>
                         )}
                       </div>
-                      {res.notes && <div style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4 }}>{res.notes}</div>}
+                      {res.notes && <div className="collab-note-md" style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4 }}><Markdown remarkPlugins={[remarkGfm]}>{res.notes}</Markdown></div>}
                       {(() => {
                         const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
                         if (!meta || Object.keys(meta).length === 0) return null
@@ -458,6 +462,98 @@ export default function PlaceInspector({
           )}
 
 
+          {/* GPX Track stats */}
+          {place.route_geometry && (() => {
+            try {
+              const pts: number[][] = JSON.parse(place.route_geometry)
+              if (!pts || pts.length < 2) return null
+              const hasEle = pts[0].length >= 3
+
+              // Haversine distance
+              const toRad = (d: number) => d * Math.PI / 180
+              let totalDist = 0
+              for (let i = 1; i < pts.length; i++) {
+                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
+                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
+                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
+                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+              }
+              const distKm = totalDist / 1000
+
+              // Elevation stats
+              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
+              if (hasEle) {
+                for (let i = 0; i < pts.length; i++) {
+                  const e = pts[i][2]
+                  if (e < minEle) minEle = e
+                  if (e > maxEle) maxEle = e
+                  if (i > 0) {
+                    const diff = e - pts[i - 1][2]
+                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
+                  }
+                }
+              }
+
+              // Elevation profile SVG
+              const chartW = 280, chartH = 60
+              const elevations = hasEle ? pts.map(p => p[2]) : []
+              let pathD = ''
+              if (elevations.length > 1) {
+                const step = Math.max(1, Math.floor(elevations.length / chartW))
+                const sampled = elevations.filter((_, i) => i % step === 0)
+                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
+                const range = eMax - eMin || 1
+                pathD = sampled.map((e, i) => {
+                  const x = (i / (sampled.length - 1)) * chartW
+                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
+                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
+                }).join(' ')
+              }
+
+              return (
+                <div style={{ background: 'var(--bg-hover)', borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <TrendingUp size={13} color="#9ca3af" />
+                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{t('inspector.trackStats')}</span>
+                  </div>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                      <MapPin size={12} color="#3b82f6" />
+                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
+                    </div>
+                    {hasEle && (
+                      <>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                          <Mountain size={12} color="#22c55e" />
+                          {Math.round(maxEle)} m
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                          <Mountain size={12} color="#ef4444" />
+                          {Math.round(minEle)} m
+                        </div>
+                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  {pathD && (
+                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" style={{ display: 'block', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
+                      <defs>
+                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
+                          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
+                        </linearGradient>
+                      </defs>
+                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
+                      <path d={pathD} fill="none" stroke="#3b82f6" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
+                    </svg>
+                  )}
+                </div>
+              )
+            } catch { return null }
+          })()}
+
           {/* Files section */}
           {(placeFiles.length > 0 || onFileUpload) && (
             <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
@@ -486,11 +582,11 @@ export default function PlaceInspector({
               {filesExpanded && placeFiles.length > 0 && (
                 <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
                   {placeFiles.map(f => (
-                    <a key={f.id} href={`/uploads/files/${f.filename}`} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer' }}>
+                    <button key={f.id} onClick={async () => { const u = await getAuthUrl(f.url, 'download'); window.open(u, '_blank', 'noopener noreferrer') }} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
                       {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
                       <span style={{ fontSize: 12, color: 'var(--text-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
                       {f.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
-                    </a>
+                    </button>
                   ))}
                 </div>
               )}

client/src/components/Planner/PlacesSidebar.tsx

@@ -1,15 +1,21 @@
+import React from 'react'
 import ReactDOM from 'react-dom'
-import { useState } from 'react'
+import { useState, useRef, useMemo, useCallback } from 'react'
 import DOM from 'react-dom'
-import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation } from 'lucide-react'
+import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { getCategoryIcon } from '../shared/categoryIcons'
 import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
+import { placesApi } from '../../api/client'
+import { useTripStore } from '../../store/tripStore'
+import { useCanDo } from '../../store/permissionsStore'
 import type { Place, Category, Day, AssignmentsMap } from '../../types'
 
 interface PlacesSidebarProps {
+  tripId: number
   places: Place[]
   categories: Category[]
   assignments: AssignmentsMap
@@ -22,31 +28,84 @@ interface PlacesSidebarProps {
   onDeletePlace: (placeId: number) => void
   days: Day[]
   isMobile: boolean
+  onCategoryFilterChange?: (categoryId: string) => void
 }
 
-export default function PlacesSidebar({
-  places, categories, assignments, selectedDayId, selectedPlaceId,
-  onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, days, isMobile,
+const PlacesSidebar = React.memo(function PlacesSidebar({
+  tripId, places, categories, assignments, selectedDayId, selectedPlaceId,
+  onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, days, isMobile, onCategoryFilterChange,
 }: PlacesSidebarProps) {
   const { t } = useTranslation()
+  const toast = useToast()
   const ctxMenu = useContextMenu()
+  const gpxInputRef = useRef<HTMLInputElement>(null)
+  const trip = useTripStore((s) => s.trip)
+  const loadTrip = useTripStore((s) => s.loadTrip)
+  const can = useCanDo()
+  const canEditPlaces = can('place_edit', trip)
+
+  const handleGpxImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    e.target.value = ''
+    try {
+      const result = await placesApi.importGpx(tripId, file)
+      await loadTrip(tripId)
+      toast.success(t('places.gpxImported', { count: result.count }))
+    } catch (err: any) {
+      toast.error(err?.response?.data?.error || t('places.gpxError'))
+    }
+  }
+
+  const [googleListOpen, setGoogleListOpen] = useState(false)
+  const [googleListUrl, setGoogleListUrl] = useState('')
+  const [googleListLoading, setGoogleListLoading] = useState(false)
+
+  const handleGoogleListImport = async () => {
+    if (!googleListUrl.trim()) return
+    setGoogleListLoading(true)
+    try {
+      const result = await placesApi.importGoogleList(tripId, googleListUrl.trim())
+      await loadTrip(tripId)
+      toast.success(t('places.googleListImported', { count: result.count, list: result.listName }))
+      setGoogleListOpen(false)
+      setGoogleListUrl('')
+    } catch (err: any) {
+      toast.error(err?.response?.data?.error || t('places.googleListError'))
+    } finally {
+      setGoogleListLoading(false)
+    }
+  }
+
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState('all')
-  const [categoryFilter, setCategoryFilter] = useState('')
+  const [categoryFilters, setCategoryFiltersLocal] = useState<Set<string>>(new Set())
+
+  const toggleCategoryFilter = (catId: string) => {
+    setCategoryFiltersLocal(prev => {
+      const next = new Set(prev)
+      if (next.has(catId)) next.delete(catId); else next.add(catId)
+      // Notify parent with first selected or empty
+      onCategoryFilterChange?.(next.size === 1 ? [...next][0] : '')
+      return next
+    })
+  }
   const [dayPickerPlace, setDayPickerPlace] = useState(null)
+  const [catDropOpen, setCatDropOpen] = useState(false)
+  const [mobileShowDays, setMobileShowDays] = useState(false)
 
   // Alle geplanten Ort-IDs abrufen (einem Tag zugewiesen)
-  const plannedIds = new Set(
+  const plannedIds = useMemo(() => new Set(
     Object.values(assignments).flatMap(da => da.map(a => a.place?.id).filter(Boolean))
-  )
+  ), [assignments])
 
-  const filtered = places.filter(p => {
+  const filtered = useMemo(() => places.filter(p => {
     if (filter === 'unplanned' && plannedIds.has(p.id)) return false
-    if (categoryFilter && String(p.category_id) !== String(categoryFilter)) return false
+    if (categoryFilters.size > 0 && !categoryFilters.has(String(p.category_id))) return false
     if (search && !p.name.toLowerCase().includes(search.toLowerCase()) &&
         !(p.address || '').toLowerCase().includes(search.toLowerCase())) return false
     return true
-  })
+  }), [places, filter, categoryFilters, search, plannedIds])
 
   const isAssignedToSelectedDay = (placeId) =>
     selectedDayId && (assignments[String(selectedDayId)] || []).some(a => a.place?.id === placeId)
@@ -55,7 +114,7 @@ export default function PlacesSidebar({
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
       {/* Kopfbereich */}
       <div style={{ padding: '14px 16px 10px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
-        <button
+        {canEditPlaces && <button
           onClick={onAddPlace}
           style={{
             display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
@@ -65,7 +124,36 @@ export default function PlacesSidebar({
           }}
         >
           <Plus size={14} strokeWidth={2} /> {t('places.addPlace')}
-        </button>
+        </button>}
+        {canEditPlaces && <>
+        <input ref={gpxInputRef} type="file" accept=".gpx" style={{ display: 'none' }} onChange={handleGpxImport} />
+        <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
+          <button
+            onClick={() => gpxInputRef.current?.click()}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+              flex: 1, padding: '5px 12px', borderRadius: 8,
+              border: '1px dashed var(--border-primary)', background: 'none',
+              color: 'var(--text-faint)', fontSize: 11, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            <Upload size={11} strokeWidth={2} /> {t('places.importGpx')}
+          </button>
+          <button
+            onClick={() => setGoogleListOpen(true)}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+              flex: 1, padding: '5px 12px', borderRadius: 8,
+              border: '1px dashed var(--border-primary)', background: 'none',
+              color: 'var(--text-faint)', fontSize: 11, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            <MapPin size={11} strokeWidth={2} /> {t('places.importGoogleList')}
+          </button>
+        </div>
+        </>}
 
         {/* Filter-Tabs */}
         <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
@@ -100,21 +188,69 @@ export default function PlacesSidebar({
           )}
         </div>
 
-        {/* Kategoriefilter */}
-        {categories.length > 0 && (
-          <div style={{ marginTop: 6 }}>
-            <CustomSelect
-              value={categoryFilter}
-              onChange={setCategoryFilter}
-              placeholder={t('places.allCategories')}
-              size="sm"
-              options={[
-                { value: '', label: t('places.allCategories') },
-                ...categories.map(c => ({ value: String(c.id), label: c.name }))
-              ]}
-            />
-          </div>
-        )}
+        {/* Category multi-select dropdown */}
+        {categories.length > 0 && (() => {
+          const label = categoryFilters.size === 0
+            ? t('places.allCategories')
+            : categoryFilters.size === 1
+              ? categories.find(c => categoryFilters.has(String(c.id)))?.name || t('places.allCategories')
+              : `${categoryFilters.size} ${t('places.categoriesSelected')}`
+          return (
+            <div style={{ marginTop: 6, position: 'relative' }}>
+              <button onClick={() => setCatDropOpen(v => !v)} style={{
+                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-primary)',
+                background: 'var(--bg-card)', fontSize: 12, color: 'var(--text-primary)',
+                cursor: 'pointer', fontFamily: 'inherit',
+              }}>
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+                <ChevronDown size={12} style={{ flexShrink: 0, color: 'var(--text-faint)', transform: catDropOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
+              </button>
+              {catDropOpen && (
+                <div style={{
+                  position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 50, marginTop: 4,
+                  background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+                  boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, maxHeight: 200, overflowY: 'auto',
+                }}>
+                  {categories.map(c => {
+                    const active = categoryFilters.has(String(c.id))
+                    const CatIcon = getCategoryIcon(c.icon)
+                    return (
+                      <button key={c.id} onClick={() => toggleCategoryFilter(String(c.id))} style={{
+                        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                        padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                        background: active ? 'var(--bg-hover)' : 'transparent',
+                        fontFamily: 'inherit', fontSize: 12, color: 'var(--text-primary)',
+                        textAlign: 'left',
+                      }}>
+                        <div style={{
+                          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+                          border: active ? 'none' : '1.5px solid var(--border-primary)',
+                          background: active ? (c.color || 'var(--accent)') : 'transparent',
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        }}>
+                          {active && <Check size={10} strokeWidth={3} color="white" />}
+                        </div>
+                        <CatIcon size={12} strokeWidth={2} color={c.color || 'var(--text-muted)'} />
+                        <span style={{ flex: 1 }}>{c.name}</span>
+                      </button>
+                    )
+                  })}
+                  {categoryFilters.size > 0 && (
+                    <button onClick={() => { setCategoryFiltersLocal(new Set()); onCategoryFilterChange?.('') }} style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
+                      width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                      background: 'transparent', fontFamily: 'inherit', fontSize: 11, color: 'var(--text-faint)',
+                      marginTop: 2, borderTop: '1px solid var(--border-faint)',
+                    }}>
+                      <X size={10} /> {t('places.clearFilter')}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          )
+        })()}
       </div>
 
       {/* Anzahl */}
@@ -129,9 +265,9 @@ export default function PlacesSidebar({
             <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>
               {filter === 'unplanned' ? t('places.allPlanned') : t('places.noneFound')}
             </span>
-            <button onClick={onAddPlace} style={{ fontSize: 12, color: 'var(--text-primary)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline', fontFamily: 'inherit' }}>
+            {canEditPlaces && <button onClick={onAddPlace} style={{ fontSize: 12, color: 'var(--text-primary)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline', fontFamily: 'inherit' }}>
               {t('places.addPlace')}
-            </button>
+            </button>}
           </div>
         ) : (
           filtered.map(place => {
@@ -151,19 +287,19 @@ export default function PlacesSidebar({
                   window.__dragData = { placeId: String(place.id) }
                 }}
                 onClick={() => {
-                  if (isMobile && days?.length > 0) {
+                  if (isMobile) {
                     setDayPickerPlace(place)
                   } else {
                     onPlaceClick(isSelected ? null : place.id)
                   }
                 }}
                 onContextMenu={e => ctxMenu.open(e, [
-                  onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
+                  canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
                   selectedDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => onAssignToDay(place.id, selectedDayId) },
                   place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
                   (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${place.lat},${place.lng}`, '_blank') },
                   { divider: true },
-                  onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
+                  canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
                 ])}
                 style={{
                   display: 'flex', alignItems: 'center', gap: 10,
@@ -172,6 +308,8 @@ export default function PlacesSidebar({
                   background: isSelected ? 'var(--border-faint)' : 'transparent',
                   borderBottom: '1px solid var(--border-faint)',
                   transition: 'background 0.1s',
+                  contentVisibility: 'auto',
+                  containIntrinsicSize: '0 52px',
                 }}
                 onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-hover)' }}
                 onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}
@@ -216,49 +354,133 @@ export default function PlacesSidebar({
         )}
       </div>
 
-      {dayPickerPlace && days?.length > 0 && ReactDOM.createPortal(
+      {dayPickerPlace && ReactDOM.createPortal(
         <div
-          onClick={() => setDayPickerPlace(null)}
+          onClick={() => { setDayPickerPlace(null); setMobileShowDays(false) }}
           style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}
         >
           <div
             onClick={e => e.stopPropagation()}
-            style={{ background: 'var(--bg-card)', borderRadius: '20px 20px 0 0', width: '100%', maxWidth: 500, maxHeight: '60vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', paddingBottom: 'env(safe-area-inset-bottom)' }}
+            style={{ background: 'var(--bg-card)', borderRadius: '20px 20px 0 0', width: '100%', maxWidth: 500, maxHeight: '70vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', paddingBottom: 'env(safe-area-inset-bottom)' }}
           >
             <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-secondary)' }}>
               <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>{dayPickerPlace.name}</div>
-              <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2 }}>{t('places.assignToDay')}</div>
+              {dayPickerPlace.address && <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2 }}>{dayPickerPlace.address}</div>}
             </div>
-            <div style={{ flex: 1, overflowY: 'auto', padding: '8px 12px 16px' }}>
-              {days.map((day, i) => {
-                return (
+            <div style={{ overflowY: 'auto', padding: '8px 12px' }}>
+              {/* View details */}
+              <button
+                onClick={() => { onPlaceClick(dayPickerPlace.id); setDayPickerPlace(null); setMobileShowDays(false) }}
+                style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
+              >
+                <Eye size={18} color="var(--text-muted)" /> {t('places.viewDetails')}
+              </button>
+              {/* Edit */}
+              {canEditPlaces && (
+                <button
+                  onClick={() => { onEditPlace(dayPickerPlace); setDayPickerPlace(null); setMobileShowDays(false) }}
+                  style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
+                >
+                  <Pencil size={18} color="var(--text-muted)" /> {t('common.edit')}
+                </button>
+              )}
+              {/* Assign to day */}
+              {days?.length > 0 && (
+                <>
                   <button
-                    key={day.id}
-                    onClick={() => { onAssignToDay(dayPickerPlace.id, day.id); setDayPickerPlace(null) }}
-                    style={{
-                      display: 'flex', alignItems: 'center', gap: 10, width: '100%',
-                      padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer',
-                      background: 'transparent', fontFamily: 'inherit', textAlign: 'left',
-                      transition: 'background 0.1s',
-                    }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => setMobileShowDays(v => !v)}
+                    style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
                   >
-                    <div style={{
-                      width: 32, height: 32, borderRadius: '50%', background: 'var(--bg-tertiary)',
-                      display: 'flex', alignItems: 'center', justifyContent: 'center',
-                      fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', flexShrink: 0,
-                    }}>{i + 1}</div>
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
-                        {day.title || `${t('dayplan.dayN', { n: i + 1 })}`}
-                      </div>
-                      {day.date && <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{new Date(day.date + 'T00:00:00').toLocaleDateString()}</div>}
-                    </div>
-                    {(assignments[String(day.id)] || []).some(a => a.place?.id === dayPickerPlace.id) && <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>✓</span>}
+                    <CalendarDays size={18} color="var(--text-muted)" /> {t('places.assignToDay')}
+                    <ChevronDown size={14} style={{ marginLeft: 'auto', color: 'var(--text-faint)', transform: mobileShowDays ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
                   </button>
-                )
-              })}
+                  {mobileShowDays && (
+                    <div style={{ paddingLeft: 20 }}>
+                      {days.map((day, i) => (
+                        <button
+                          key={day.id}
+                          onClick={() => { onAssignToDay(dayPickerPlace.id, day.id); setDayPickerPlace(null); setMobileShowDays(false) }}
+                          style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '10px 14px', borderRadius: 10, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left' }}
+                        >
+                          <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', flexShrink: 0 }}>{i + 1}</div>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>{day.title || t('dayplan.dayN', { n: i + 1 })}</div>
+                            {day.date && <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{new Date(day.date + 'T00:00:00').toLocaleDateString()}</div>}
+                          </div>
+                          {(assignments[String(day.id)] || []).some(a => a.place?.id === dayPickerPlace.id) && <Check size={14} color="var(--text-faint)" />}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+              {/* Delete */}
+              {canEditPlaces && (
+                <button
+                  onClick={() => { onDeletePlace(dayPickerPlace.id); setDayPickerPlace(null); setMobileShowDays(false) }}
+                  style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: '#ef4444' }}
+                >
+                  <Trash2 size={18} /> {t('common.delete')}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+      {googleListOpen && ReactDOM.createPortal(
+        <div
+          onClick={() => { setGoogleListOpen(false); setGoogleListUrl('') }}
+          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+        >
+          <div
+            onClick={e => e.stopPropagation()}
+            style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 440, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)' }}
+          >
+            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 4 }}>
+              {t('places.importGoogleList')}
+            </div>
+            <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 16 }}>
+              {t('places.googleListHint')}
+            </div>
+            <input
+              type="text"
+              value={googleListUrl}
+              onChange={e => setGoogleListUrl(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter' && !googleListLoading) handleGoogleListImport() }}
+              placeholder="https://maps.app.goo.gl/..."
+              autoFocus
+              style={{
+                width: '100%', padding: '10px 14px', borderRadius: 10,
+                border: '1px solid var(--border-primary)', background: 'var(--bg-tertiary)',
+                fontSize: 13, color: 'var(--text-primary)', outline: 'none',
+                fontFamily: 'inherit', boxSizing: 'border-box',
+              }}
+            />
+            <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
+              <button
+                onClick={() => { setGoogleListOpen(false); setGoogleListUrl('') }}
+                style={{
+                  padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)',
+                  background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500,
+                  cursor: 'pointer', fontFamily: 'inherit',
+                }}
+              >
+                {t('common.cancel')}
+              </button>
+              <button
+                onClick={handleGoogleListImport}
+                disabled={!googleListUrl.trim() || googleListLoading}
+                style={{
+                  padding: '8px 16px', borderRadius: 10, border: 'none',
+                  background: !googleListUrl.trim() || googleListLoading ? 'var(--bg-tertiary)' : 'var(--accent)',
+                  color: !googleListUrl.trim() || googleListLoading ? 'var(--text-faint)' : 'var(--accent-text)',
+                  fontSize: 13, fontWeight: 500, cursor: !googleListUrl.trim() || googleListLoading ? 'default' : 'pointer',
+                  fontFamily: 'inherit',
+                }}
+              >
+                {googleListLoading ? t('common.loading') : t('common.import')}
+              </button>
             </div>
           </div>
         </div>,
@@ -267,4 +489,6 @@ export default function PlacesSidebar({
       <ContextMenu menu={ctxMenu.menu} onClose={ctxMenu.close} />
     </div>
   )
-}
+})
+
+export default PlacesSidebar

client/src/components/Planner/ReservationModal.tsx

@@ -1,4 +1,7 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
+import { useParams } from 'react-router-dom'
+import apiClient from '../../api/client'
+import { useTripStore } from '../../store/tripStore'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import { Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2 } from 'lucide-react'
@@ -56,12 +59,14 @@ interface ReservationModalProps {
   assignments: AssignmentsMap
   selectedDayId: number | null
   files?: TripFile[]
-  onFileUpload: (fd: FormData) => Promise<void>
+  onFileUpload?: (fd: FormData) => Promise<void>
   onFileDelete: (fileId: number) => Promise<void>
   accommodations?: Accommodation[]
 }
 
 export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [] }: ReservationModalProps) {
+  const { id: tripId } = useParams<{ id: string }>()
+  const loadFiles = useTripStore(s => s.loadFiles)
   const toast = useToast()
   const { t, locale } = useTranslation()
   const fileInputRef = useRef(null)
@@ -78,6 +83,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const [isSaving, setIsSaving] = useState(false)
   const [uploadingFile, setUploadingFile] = useState(false)
   const [pendingFiles, setPendingFiles] = useState([])
+  const [showFilePicker, setShowFilePicker] = useState(false)
+  const [linkedFileIds, setLinkedFileIds] = useState<number[]>([])
+  const [unlinkedFileIds, setUnlinkedFileIds] = useState<number[]>([])
 
   const assignmentOptions = useMemo(
     () => buildAssignmentOptions(days, assignments, t, locale),
@@ -204,7 +212,13 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
     }
   }
 
-  const attachedFiles = reservation?.id ? files.filter(f => f.reservation_id === reservation.id) : []
+  const attachedFiles = reservation?.id
+    ? files.filter(f =>
+        f.reservation_id === reservation.id ||
+        linkedFileIds.includes(f.id) ||
+        (f.linked_reservation_ids && f.linked_reservation_ids.includes(reservation.id))
+      )
+    : []
 
   const inputStyle = {
     width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
@@ -459,11 +473,23 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
                 <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
                 <a href={f.url} target="_blank" rel="noreferrer" style={{ color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}><ExternalLink size={11} /></a>
-                {onFileDelete && (
-                  <button type="button" onClick={() => onFileDelete(f.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
-                    <X size={11} />
-                  </button>
-                )}
+                <button type="button" onClick={async () => {
+                  // Always unlink, never delete the file
+                  // Clear primary reservation_id if it points to this reservation
+                  if (f.reservation_id === reservation?.id) {
+                    try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch {}
+                  }
+                  // Remove from file_links if linked there
+                  try {
+                    const linksRes = await apiClient.get(`/trips/${tripId}/files/${f.id}/links`)
+                    const link = (linksRes.data.links || []).find((l: any) => l.reservation_id === reservation?.id)
+                    if (link) await apiClient.delete(`/trips/${tripId}/files/${f.id}/link/${link.id}`)
+                  } catch {}
+                  setLinkedFileIds(prev => prev.filter(id => id !== f.id))
+                  if (tripId) loadFiles(tripId)
+                }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
+                  <X size={11} />
+                </button>
               </div>
             ))}
             {pendingFiles.map((f, i) => (
@@ -477,14 +503,56 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
               </div>
             ))}
             <input ref={fileInputRef} type="file" accept=".pdf,.doc,.docx,.txt,image/*" style={{ display: 'none' }} onChange={handleFileChange} />
-            <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} style={{
-              display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
-              border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-              fontSize: 11, color: 'var(--text-faint)', cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
-            }}>
-              <Paperclip size={11} />
-              {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
-            </button>
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+              {onFileUpload && <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} style={{
+                display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
+                border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
+                fontSize: 11, color: 'var(--text-faint)', cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
+              }}>
+                <Paperclip size={11} />
+                {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
+              </button>}
+              {/* Link existing file picker */}
+              {reservation?.id && files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).length > 0 && (
+                <div style={{ position: 'relative' }}>
+                  <button type="button" onClick={() => setShowFilePicker(v => !v)} style={{
+                    display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
+                    border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
+                    fontSize: 11, color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
+                  }}>
+                    <Link2 size={11} /> {t('reservations.linkExisting')}
+                  </button>
+                  {showFilePicker && (
+                    <div style={{
+                      position: 'absolute', bottom: '100%', left: 0, marginBottom: 4, zIndex: 50,
+                      background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+                      boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 220, maxHeight: 200, overflowY: 'auto',
+                    }}>
+                      {files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).map(f => (
+                        <button key={f.id} type="button" onClick={async () => {
+                          try {
+                            await apiClient.post(`/trips/${tripId}/files/${f.id}/link`, { reservation_id: reservation.id })
+                            setLinkedFileIds(prev => [...prev, f.id])
+                            setShowFilePicker(false)
+                            if (tripId) loadFiles(tripId)
+                          } catch {}
+                        }}
+                          style={{
+                            display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px',
+                            background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, fontFamily: 'inherit',
+                            color: 'var(--text-secondary)', borderRadius: 7, textAlign: 'left',
+                          }}
+                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+                          onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+                          <FileText size={12} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
@@ -505,5 +573,5 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
 function formatDate(dateStr, locale) {
   if (!dateStr) return ''
   const d = new Date(dateStr + 'T00:00:00')
-  return d.toLocaleDateString(locale || 'de-DE', { day: 'numeric', month: 'short' })
+  return d.toLocaleDateString(locale || undefined, { day: 'numeric', month: 'short' })
 }

client/src/components/Planner/ReservationsPanel.tsx

@@ -1,5 +1,7 @@
 import { useState, useMemo } from 'react'
+import ReactDOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
+import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
@@ -55,25 +57,29 @@ interface ReservationCardProps {
   files?: TripFile[]
   onNavigateToFiles: () => void
   assignmentLookup: Record<number, AssignmentLookupEntry>
+  canEdit: boolean
 }
 
-function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup }: ReservationCardProps) {
+function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit }: ReservationCardProps) {
   const { toggleReservationStatus } = useTripStore()
   const toast = useToast()
   const { t, locale } = useTranslation()
   const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
+  const blurCodes = useSettingsStore(s => s.settings.blur_booking_codes)
+  const [codeRevealed, setCodeRevealed] = useState(false)
   const typeInfo = getType(r.type)
   const TypeIcon = typeInfo.Icon
   const confirmed = r.status === 'confirmed'
-  const attachedFiles = files.filter(f => f.reservation_id === r.id)
+  const attachedFiles = files.filter(f => f.reservation_id === r.id || (f.linked_reservation_ids || []).includes(r.id))
   const linked = r.assignment_id ? assignmentLookup[r.assignment_id] : null
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 
   const handleToggle = async () => {
     try { await toggleReservationStatus(tripId, r.id) }
     catch { toast.error(t('reservations.toast.updateError')) }
   }
   const handleDelete = async () => {
-    if (!confirm(t('reservations.confirm.delete', { name: r.title }))) return
+    setShowDeleteConfirm(false)
     try { await onDelete(r.id) } catch { toast.error(t('reservations.toast.deleteError')) }
   }
 
@@ -91,24 +97,34 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
       {/* Header bar */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)' }}>
         <div style={{ width: 7, height: 7, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
-        <button onClick={handleToggle} style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706', background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit' }}>
-          {confirmed ? t('reservations.confirmed') : t('reservations.pending')}
-        </button>
+        {canEdit ? (
+          <button onClick={handleToggle} style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706', background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit' }}>
+            {confirmed ? t('reservations.confirmed') : t('reservations.pending')}
+          </button>
+        ) : (
+          <span style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706', padding: 0 }}>
+            {confirmed ? t('reservations.confirmed') : t('reservations.pending')}
+          </span>
+        )}
         <div style={{ width: 1, height: 10, background: 'var(--border-faint)' }} />
         <TypeIcon size={11} style={{ color: typeInfo.color, flexShrink: 0 }} />
         <span style={{ fontSize: 10, color: 'var(--text-faint)' }}>{t(typeInfo.labelKey)}</span>
         <span style={{ flex: 1 }} />
         <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
-        <button onClick={() => onEdit(r)} title={t('common.edit')} style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}
-          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-          <Pencil size={11} />
-        </button>
-        <button onClick={handleDelete} title={t('common.delete')} style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}
-          onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-          <Trash2 size={11} />
-        </button>
+        {canEdit && (
+          <button onClick={() => onEdit(r)} title={t('common.edit')} style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}
+            onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+            <Pencil size={11} />
+          </button>
+        )}
+        {canEdit && (
+          <button onClick={() => setShowDeleteConfirm(true)} title={t('common.delete')} style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}
+            onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
+            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+            <Trash2 size={11} />
+          </button>
+        )}
       </div>
 
       {/* Details */}
@@ -127,14 +143,26 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
                 <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center', borderRight: '1px solid var(--border-faint)' }}>
                   <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.time')}</div>
                   <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>
-                    {fmtTime(r.reservation_time)}{r.reservation_end_time ? ` – ${r.reservation_end_time}` : ''}
+                    {fmtTime(r.reservation_time)}{r.reservation_end_time ? ` – ${r.reservation_end_time.includes('T') ? fmtTime(r.reservation_end_time) : fmtTime(r.reservation_time.split('T')[0] + 'T' + r.reservation_end_time)}` : ''}
                   </div>
                 </div>
               )}
               {r.confirmation_number && (
                 <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center' }}>
                   <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.confirmationCode')}</div>
-                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>{r.confirmation_number}</div>
+                  <div
+                    onMouseEnter={() => blurCodes && setCodeRevealed(true)}
+                    onMouseLeave={() => blurCodes && setCodeRevealed(false)}
+                    onClick={() => blurCodes && setCodeRevealed(v => !v)}
+                    style={{
+                      fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1,
+                      filter: blurCodes && !codeRevealed ? 'blur(5px)' : 'none',
+                      cursor: blurCodes ? 'pointer' : 'default',
+                      transition: 'filter 0.2s',
+                    }}
+                  >
+                    {r.confirmation_number}
+                  </div>
                 </div>
               )}
             </div>
@@ -227,6 +255,46 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           </div>
         </div>
       )}
+      {/* Delete confirmation popup */}
+      {showDeleteConfirm && ReactDOM.createPortal(
+        <div style={{
+          position: 'fixed', inset: 0, zIndex: 1000,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(3px)',
+        }} onClick={() => setShowDeleteConfirm(false)}>
+          <div style={{
+            width: 340, background: 'var(--bg-card)', borderRadius: 16,
+            boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
+            display: 'flex', flexDirection: 'column', gap: 12,
+          }} onClick={e => e.stopPropagation()}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <div style={{
+                width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                borderRadius: '50%', background: 'rgba(239,68,68,0.12)',
+              }}>
+                <Trash2 size={18} strokeWidth={1.8} color="#ef4444" />
+              </div>
+              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
+                {t('reservations.confirm.deleteTitle')}
+              </div>
+            </div>
+            <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
+              {t('reservations.confirm.deleteBody', { name: r.title })}
+            </div>
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
+              <button onClick={() => setShowDeleteConfirm(false)} style={{
+                fontSize: 12, background: 'none', border: '1px solid var(--border-primary)',
+                borderRadius: 8, padding: '6px 14px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit',
+              }}>{t('common.cancel')}</button>
+              <button onClick={handleDelete} style={{
+                fontSize: 12, background: '#ef4444', color: 'white',
+                border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
+              }}>{t('common.confirm')}</button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
     </div>
   )
 }
@@ -274,6 +342,9 @@ interface ReservationsPanelProps {
 
 export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles }: ReservationsPanelProps) {
   const { t, locale } = useTranslation()
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
+  const canEdit = can('reservation_edit', trip)
   const [showHint, setShowHint] = useState(() => !localStorage.getItem('hideReservationHint'))
 
   const assignmentLookup = useMemo(() => buildAssignmentLookup(days, assignments), [days, assignments])
@@ -292,13 +363,15 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
             {total === 0 ? t('reservations.empty') : t('reservations.summary', { confirmed: allConfirmed.length, pending: allPending.length })}
           </p>
         </div>
-        <button onClick={onAdd} style={{
-          display: 'flex', alignItems: 'center', gap: 5, padding: '7px 14px', borderRadius: 99,
-          border: 'none', background: 'var(--accent)', color: 'var(--accent-text)',
-          fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-        }}>
-          <Plus size={13} /> <span className="hidden sm:inline">{t('reservations.addManual')}</span>
-        </button>
+        {canEdit && (
+          <button onClick={onAdd} style={{
+            display: 'flex', alignItems: 'center', gap: 5, padding: '7px 14px', borderRadius: 99,
+            border: 'none', background: 'var(--accent)', color: 'var(--accent-text)',
+            fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+          }}>
+            <Plus size={13} /> <span className="hidden sm:inline">{t('reservations.addManual')}</span>
+          </button>
+        )}
       </div>
 
       {/* Content */}
@@ -314,14 +387,14 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
             {allPending.length > 0 && (
               <Section title={t('reservations.pending')} count={allPending.length} accent="gray">
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-                  {allPending.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} />)}
+                  {allPending.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} />)}
                 </div>
               </Section>
             )}
             {allConfirmed.length > 0 && (
               <Section title={t('reservations.confirmed')} count={allConfirmed.length} accent="green">
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-                  {allConfirmed.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} />)}
+                  {allConfirmed.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} />)}
                 </div>
               </Section>
             )}

client/src/components/Trips/TripFormModal.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect, useRef } from 'react'
 import Modal from '../shared/Modal'
-import { Calendar, Camera, X, Clipboard } from 'lucide-react'
-import { tripsApi } from '../../api/client'
+import { Calendar, Camera, X, Clipboard, UserPlus, Bell } from 'lucide-react'
+import { tripsApi, authApi } from '../../api/client'
+import CustomSelect from '../shared/CustomSelect'
+import { useAuthStore } from '../../store/authStore'
+import { useCanDo } from '../../store/permissionsStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
@@ -20,36 +23,66 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
   const fileRef = useRef(null)
   const toast = useToast()
   const { t } = useTranslation()
+  const currentUser = useAuthStore(s => s.user)
+  const tripRemindersEnabled = useAuthStore(s => s.tripRemindersEnabled)
+  const setTripRemindersEnabled = useAuthStore(s => s.setTripRemindersEnabled)
+  const can = useCanDo()
+  const canUploadCover = !isEditing || can('trip_cover_upload', trip)
+  const canEditTrip = !isEditing || can('trip_edit', trip)
 
   const [formData, setFormData] = useState({
     title: '',
     description: '',
     start_date: '',
     end_date: '',
+    reminder_days: 0 as number,
   })
+  const [customReminder, setCustomReminder] = useState(false)
   const [error, setError] = useState('')
   const [isLoading, setIsLoading] = useState(false)
   const [coverPreview, setCoverPreview] = useState(null)
   const [pendingCoverFile, setPendingCoverFile] = useState(null)
   const [uploadingCover, setUploadingCover] = useState(false)
+  const [allUsers, setAllUsers] = useState<{ id: number; username: string }[]>([])
+  const [selectedMembers, setSelectedMembers] = useState<number[]>([])
+  const [memberSelectValue, setMemberSelectValue] = useState('')
 
   useEffect(() => {
     if (trip) {
+      const rd = trip.reminder_days ?? 3
       setFormData({
         title: trip.title || '',
         description: trip.description || '',
         start_date: trip.start_date || '',
         end_date: trip.end_date || '',
+        reminder_days: rd,
       })
+      setCustomReminder(![0, 1, 3, 9].includes(rd))
       setCoverPreview(trip.cover_image || null)
     } else {
-      setFormData({ title: '', description: '', start_date: '', end_date: '' })
+      setFormData({ title: '', description: '', start_date: '', end_date: '', reminder_days: tripRemindersEnabled ? 3 : 0 })
+      setCustomReminder(false)
       setCoverPreview(null)
     }
     setPendingCoverFile(null)
+    setSelectedMembers([])
     setError('')
+    if (isOpen) {
+      authApi.getAppConfig().then((c: { trip_reminders_enabled?: boolean }) => {
+        if (c?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(c.trip_reminders_enabled)
+      }).catch(() => {})
+    }
+    if (!trip) {
+      authApi.listUsers().then(d => setAllUsers(d.users || [])).catch(() => {})
+    }
   }, [trip, isOpen])
 
+  useEffect(() => {
+    if (!trip && isOpen) {
+      setFormData(prev => ({ ...prev, reminder_days: tripRemindersEnabled ? 3 : 0 }))
+    }
+  }, [tripRemindersEnabled])
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     setError('')
@@ -64,7 +97,17 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
         description: formData.description.trim() || null,
         start_date: formData.start_date || null,
         end_date: formData.end_date || null,
+        reminder_days: formData.reminder_days,
       })
+      // Add selected members for newly created trips
+      if (selectedMembers.length > 0 && result?.trip?.id) {
+        for (const userId of selectedMembers) {
+          const user = allUsers.find(u => u.id === userId)
+          if (user) {
+            try { await tripsApi.addMember(result.trip.id, user.username) } catch {}
+          }
+        }
+      }
       // Upload pending cover for newly created trips
       if (pendingCoverFile && result?.trip?.id) {
         try {
@@ -135,6 +178,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
 
   // Paste support for cover image
   const handlePaste = (e) => {
+    if (!canUploadCover) return
     const items = e.clipboardData?.items
     if (!items) return
     for (const item of Array.from(items)) {
@@ -192,8 +236,8 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
           <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">{error}</div>
         )}
 
-        {/* Cover image — available for both create and edit */}
-        <div>
+        {/* Cover image — gated by trip_cover_upload permission */}
+        {canUploadCover && <div>
           <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('dashboard.coverImage')}</label>
           <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleCoverChange} />
           {coverPreview ? (
@@ -212,26 +256,29 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
             </div>
           ) : (
             <button type="button" onClick={() => fileRef.current?.click()} disabled={uploadingCover}
-              style={{ width: '100%', padding: '18px', border: '2px dashed #e5e7eb', borderRadius: 10, background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: '#9ca3af', fontFamily: 'inherit' }}
+              onDragOver={e => { e.preventDefault(); e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.background = 'rgba(99,102,241,0.04)' }}
+              onDragLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.background = 'none' }}
+              onDrop={e => { e.preventDefault(); e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.background = 'none'; const file = e.dataTransfer.files?.[0]; if (file?.type.startsWith('image/')) handleCoverSelect(file) }}
+              style={{ width: '100%', padding: '18px', border: '2px dashed #e5e7eb', borderRadius: 10, background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: '#9ca3af', fontFamily: 'inherit', transition: 'all 0.15s' }}
               onMouseEnter={e => { e.currentTarget.style.borderColor = '#d1d5db'; e.currentTarget.style.color = '#6b7280' }}
               onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#9ca3af' }}>
               <Camera size={15} /> {uploadingCover ? t('common.uploading') : t('dashboard.addCoverImage')}
             </button>
           )}
-        </div>
+        </div>}
 
         <div>
           <label className="block text-sm font-medium text-slate-700 mb-1.5">
             {t('dashboard.tripTitle')} <span className="text-red-500">*</span>
           </label>
-          <input type="text" value={formData.title} onChange={e => update('title', e.target.value)}
-            required placeholder={t('dashboard.tripTitlePlaceholder')} className={inputCls} />
+          <input type="text" value={formData.title} onChange={e => canEditTrip && update('title', e.target.value)}
+            required readOnly={!canEditTrip} placeholder={t('dashboard.tripTitlePlaceholder')} className={inputCls} />
         </div>
 
         <div>
           <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('dashboard.tripDescription')}</label>
-          <textarea value={formData.description} onChange={e => update('description', e.target.value)}
-            placeholder={t('dashboard.tripDescriptionPlaceholder')} rows={3}
+          <textarea value={formData.description} onChange={e => canEditTrip && update('description', e.target.value)}
+            readOnly={!canEditTrip} placeholder={t('dashboard.tripDescriptionPlaceholder')} rows={3}
             className={`${inputCls} resize-none`} />
         </div>
 
@@ -250,11 +297,99 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
           </div>
         </div>
 
-        {!formData.start_date && !formData.end_date && (
-          <p className="text-xs text-slate-400 bg-slate-50 rounded-lg p-3">
-            {t('dashboard.noDateHint')}
-          </p>
+        {/* Reminder — only visible to owner (or when creating) */}
+        {(!isEditing || trip?.user_id === currentUser?.id || currentUser?.role === 'admin') && (
+        <div className={!tripRemindersEnabled ? 'opacity-50' : ''}>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">
+            <Bell className="inline w-4 h-4 mr-1" />{t('trips.reminder')}
+          </label>
+          {!tripRemindersEnabled ? (
+            <p className="text-xs text-slate-400 bg-slate-50 rounded-lg p-3">
+              {t('trips.reminderDisabledHint')}
+            </p>
+          ) : (
+            <>
+              <div className="flex flex-wrap gap-2">
+                {[
+                  { value: 0, label: t('trips.reminderNone') },
+                  { value: 1, label: `1 ${t('trips.reminderDay')}` },
+                  { value: 3, label: `3 ${t('trips.reminderDays')}` },
+                  { value: 9, label: `9 ${t('trips.reminderDays')}` },
+                ].map(opt => (
+                  <button key={opt.value} type="button"
+                    onClick={() => { update('reminder_days', opt.value); setCustomReminder(false) }}
+                    className={`px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${
+                      !customReminder && formData.reminder_days === opt.value
+                        ? 'bg-slate-900 text-white border-slate-900'
+                        : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
+                    }`}>
+                    {opt.label}
+                  </button>
+                ))}
+                <button type="button"
+                  onClick={() => { setCustomReminder(true); if ([0, 1, 3, 9].includes(formData.reminder_days)) update('reminder_days', 7) }}
+                  className={`px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${
+                    customReminder
+                      ? 'bg-slate-900 text-white border-slate-900'
+                      : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
+                  }`}>
+                  {t('trips.reminderCustom')}
+                </button>
+              </div>
+              {customReminder && (
+                <div className="flex items-center gap-2 mt-2">
+                  <input type="number" min={1} max={30}
+                    value={formData.reminder_days}
+                    onChange={e => update('reminder_days', Math.max(1, Math.min(30, Number(e.target.value) || 1)))}
+                    className="w-20 px-3 py-1.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-300" />
+                  <span className="text-xs text-slate-500">{t('trips.reminderDaysBefore')}</span>
+                </div>
+              )}
+            </>
+          )}
+        </div>
         )}
+
+        {/* Members — only for new trips */}
+        {!isEditing && allUsers.filter(u => u.id !== currentUser?.id).length > 0 && (
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">
+              <UserPlus className="inline w-4 h-4 mr-1" />{t('dashboard.addMembers')}
+            </label>
+            {selectedMembers.length > 0 && (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
+                {selectedMembers.map(uid => {
+                  const user = allUsers.find(u => u.id === uid)
+                  if (!user) return null
+                  return (
+                    <span key={uid} onClick={() => setSelectedMembers(prev => prev.filter(id => id !== uid))}
+                      style={{
+                        display: 'flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 99,
+                        background: 'var(--bg-secondary)', fontSize: 12, fontWeight: 500, color: 'var(--text-primary)', cursor: 'pointer',
+                        border: '1px solid var(--border-primary)',
+                      }}>
+                      {user.username}
+                      <X size={11} style={{ color: 'var(--text-faint)' }} />
+                    </span>
+                  )
+                })}
+              </div>
+            )}
+            <div style={{ display: 'flex', gap: 8 }}>
+              <CustomSelect
+                value={memberSelectValue}
+                onChange={value => {
+                  if (value) { setSelectedMembers(prev => prev.includes(Number(value)) ? prev : [...prev, Number(value)]); setMemberSelectValue('') }
+                }}
+                placeholder={t('dashboard.addMember')}
+                options={allUsers.filter(u => u.id !== currentUser?.id && !selectedMembers.includes(u.id)).map(u => ({ value: u.id, label: u.username }))}
+                searchable
+                size="sm"
+              />
+            </div>
+          </div>
+        )}
+
       </form>
     </Modal>
   )

client/src/components/Trips/TripMembersModal.tsx

@@ -1,9 +1,11 @@
 import { useState, useEffect } from 'react'
 import Modal from '../shared/Modal'
-import { tripsApi, authApi } from '../../api/client'
+import { tripsApi, authApi, shareApi } from '../../api/client'
 import { useToast } from '../shared/Toast'
 import { useAuthStore } from '../../store/authStore'
-import { Crown, UserMinus, UserPlus, Users, LogOut } from 'lucide-react'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
+import { Crown, UserMinus, UserPlus, Users, LogOut, Link2, Trash2, Copy, Check } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { getApiErrorMessage } from '../../types'
 import CustomSelect from '../shared/CustomSelect'
@@ -32,6 +34,129 @@ function Avatar({ username, avatarUrl, size = 32 }: AvatarProps) {
   )
 }
 
+function ShareLinkSection({ tripId, t }: { tripId: number; t: (key: string, params?: Record<string, string | number>) => string }) {
+  const [shareToken, setShareToken] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [copied, setCopied] = useState(false)
+  const [perms, setPerms] = useState({ share_map: true, share_bookings: true, share_packing: false, share_budget: false, share_collab: false })
+  const toast = useToast()
+
+  useEffect(() => {
+    shareApi.getLink(tripId).then(d => {
+      setShareToken(d.token)
+      if (d.token) setPerms({ share_map: d.share_map ?? true, share_bookings: d.share_bookings ?? true, share_packing: d.share_packing ?? false, share_budget: d.share_budget ?? false, share_collab: d.share_collab ?? false })
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [tripId])
+
+  const shareUrl = shareToken ? `${window.location.origin}/shared/${shareToken}` : null
+
+  const handleCreate = async () => {
+    try {
+      const d = await shareApi.createLink(tripId, perms)
+      setShareToken(d.token)
+    } catch { toast.error(t('share.createError')) }
+  }
+
+  const handleUpdatePerms = async (key: string, val: boolean) => {
+    const newPerms = { ...perms, [key]: val }
+    setPerms(newPerms)
+    if (shareToken) {
+      try { await shareApi.createLink(tripId, newPerms) } catch {}
+    }
+  }
+
+  const handleDelete = async () => {
+    try {
+      await shareApi.deleteLink(tripId)
+      setShareToken(null)
+    } catch {}
+  }
+
+  const handleCopy = () => {
+    if (shareUrl) {
+      navigator.clipboard.writeText(shareUrl)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  if (loading) return null
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
+        <Link2 size={14} style={{ color: 'var(--text-muted)' }} />
+        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{t('share.linkTitle')}</span>
+      </div>
+      <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 10, lineHeight: 1.5 }}>{t('share.linkHint')}</p>
+
+      {/* Permission checkboxes */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
+        {[
+          { key: 'share_map', label: t('share.permMap'), always: true },
+          { key: 'share_bookings', label: t('share.permBookings') },
+          { key: 'share_packing', label: t('share.permPacking') },
+          { key: 'share_budget', label: t('share.permBudget') },
+          { key: 'share_collab', label: t('share.permCollab') },
+        ].map(opt => (
+          <button key={opt.key} onClick={() => !opt.always && handleUpdatePerms(opt.key, !perms[opt.key])}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 20,
+              border: '1.5px solid', fontSize: 11, fontWeight: 500, cursor: opt.always ? 'default' : 'pointer',
+              fontFamily: 'inherit', transition: 'all 0.12s',
+              background: perms[opt.key] ? 'var(--text-primary)' : 'transparent',
+              borderColor: perms[opt.key] ? 'var(--text-primary)' : 'var(--border-primary)',
+              color: perms[opt.key] ? 'var(--bg-primary)' : 'var(--text-muted)',
+              opacity: opt.always ? 0.7 : 1,
+            }}>
+            {perms[opt.key] ? <Check size={10} /> : null}
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      {shareUrl ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <div style={{
+            display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px',
+            background: 'var(--bg-tertiary)', borderRadius: 8, border: '1px solid var(--border-faint)',
+          }}>
+            <input type="text" value={shareUrl} readOnly style={{
+              flex: 1, border: 'none', background: 'none', fontSize: 11, color: 'var(--text-primary)',
+              outline: 'none', fontFamily: 'monospace',
+            }} />
+            <button onClick={handleCopy} style={{
+              display: 'flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 6,
+              border: 'none', background: copied ? '#16a34a' : 'var(--accent)', color: copied ? 'white' : 'var(--accent-text)',
+              fontSize: 10, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', transition: 'background 0.2s',
+            }}>
+              {copied ? <><Check size={10} /> {t('common.copied')}</> : <><Copy size={10} /> {t('common.copy')}</>}
+            </button>
+          </div>
+          <button onClick={handleDelete} style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+            padding: '6px 0', borderRadius: 8, border: '1px solid rgba(239,68,68,0.3)',
+            background: 'rgba(239,68,68,0.06)', color: '#ef4444', fontSize: 11, fontWeight: 500,
+            cursor: 'pointer', fontFamily: 'inherit',
+          }}>
+            <Trash2 size={11} /> {t('share.deleteLink')}
+          </button>
+        </div>
+      ) : (
+        <button onClick={handleCreate} style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+          width: '100%', padding: '8px 0', borderRadius: 8, border: '1px dashed var(--border-primary)',
+          background: 'none', color: 'var(--text-muted)', fontSize: 12, fontWeight: 500,
+          cursor: 'pointer', fontFamily: 'inherit',
+        }}>
+          <Link2 size={12} /> {t('share.createLink')}
+        </button>
+      )}
+    </div>
+  )
+}
+
 interface TripMembersModalProps {
   isOpen: boolean
   onClose: () => void
@@ -49,6 +174,10 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }:
   const toast = useToast()
   const { user } = useAuthStore()
   const { t } = useTranslation()
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
+  const canManageMembers = can('member_manage', trip)
+  const canManageShare = can('share_manage', trip)
 
   useEffect(() => {
     if (isOpen && tripId) {
@@ -123,8 +252,12 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }:
   ] : []
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t('members.shareTrip')} size="sm">
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 20, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+    <Modal isOpen={isOpen} onClose={onClose} title={t('members.shareTrip')} size="3xl">
+      <div style={{ display: 'grid', gridTemplateColumns: canManageShare ? '1fr 1fr' : '1fr', gap: 24, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} className="share-modal-grid">
+        <style>{`@media (max-width: 640px) { .share-modal-grid { grid-template-columns: 1fr !important; } }`}</style>
+
+        {/* Left column: Members */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
 
         {/* Trip name */}
         <div style={{ padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: 10, border: '1px solid var(--border-secondary)' }}>
@@ -133,7 +266,7 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }:
         </div>
 
         {/* Add member dropdown */}
-        <div>
+        {canManageMembers && <div>
           <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 8 }}>
             {t('members.inviteUser')}
           </label>
@@ -166,10 +299,10 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }:
               <UserPlus size={13} /> {adding ? '…' : t('members.invite')}
             </button>
           </div>
-          {availableUsers.length === 0 && allUsers.length > 0 && (
+          {availableUsers.length === 0 && allUsers.length > 0 && canManageMembers && (
             <p style={{ fontSize: 11.5, color: 'var(--text-faint)', margin: '6px 0 0' }}>{t('members.allHaveAccess')}</p>
           )}
-        </div>
+        </div>}
 
         {/* Members list */}
         <div>
@@ -190,7 +323,7 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }:
             <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
               {allMembers.map(member => {
                 const isSelf = member.id === user?.id
-                const canRemove = isCurrentOwner ? member.role !== 'owner' : isSelf
+                const canRemove = isSelf || (canManageMembers && member.role !== 'owner')
                 return (
                   <div key={member.id} style={{
                     display: 'flex', alignItems: 'center', gap: 10,
@@ -228,6 +361,13 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }:
           )}
         </div>
 
+        </div>
+
+        {/* Right column: Share Link */}
+        {canManageShare && <div style={{ borderLeft: '1px solid var(--border-faint)', paddingLeft: 24 }}>
+        <ShareLinkSection tripId={tripId} t={t} />
+        </div>}
+
         <style>{`@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }`}</style>
       </div>
     </Modal>

client/src/components/Vacay/VacayCalendar.tsx

@@ -26,6 +26,7 @@ export default function VacayCalendar() {
   }, [entries])
 
   const blockWeekends = plan?.block_weekends !== false
+  const weekendDays: number[] = plan?.weekend_days ? String(plan.weekend_days).split(',').map(Number) : [0, 6]
   const companyHolidaysEnabled = plan?.company_holidays_enabled !== false
 
   const handleCellClick = useCallback(async (dateStr) => {
@@ -35,7 +36,7 @@ export default function VacayCalendar() {
       return
     }
     if (holidays[dateStr]) return
-    if (blockWeekends && isWeekend(dateStr)) return
+    if (blockWeekends && isWeekend(dateStr, weekendDays)) return
     if (companyHolidaysEnabled && companyHolidaySet.has(dateStr)) return
     await toggleEntry(dateStr, selectedUserId || undefined)
   }, [companyMode, toggleEntry, toggleCompanyHoliday, holidays, companyHolidaySet, blockWeekends, companyHolidaysEnabled, selectedUserId])
@@ -57,6 +58,7 @@ export default function VacayCalendar() {
             onCellClick={handleCellClick}
             companyMode={companyMode}
             blockWeekends={blockWeekends}
+            weekendDays={weekendDays}
           />
         ))}
       </div>

client/src/components/Vacay/VacayMonthCard.tsx

@@ -3,10 +3,14 @@ import { useTranslation } from '../../i18n'
 import { isWeekend } from './holidays'
 import type { HolidaysMap, VacayEntry } from '../../types'
 
-const WEEKDAYS_EN = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
-const WEEKDAYS_DE = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
-const MONTHS_EN = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-const MONTHS_DE = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+const WEEKDAY_KEYS = ['vacay.mon', 'vacay.tue', 'vacay.wed', 'vacay.thu', 'vacay.fri', 'vacay.sat', 'vacay.sun'] as const
+
+function hexToRgba(hex: string, alpha: number): string {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  return `rgba(${r},${g},${b},${alpha})`
+}
 
 interface VacayMonthCardProps {
   year: number
@@ -18,16 +22,18 @@ interface VacayMonthCardProps {
   onCellClick: (date: string) => void
   companyMode: boolean
   blockWeekends: boolean
+  weekendDays?: number[]
 }
 
 export default function VacayMonthCard({
   year, month, holidays, companyHolidaySet, companyHolidaysEnabled = true, entryMap,
-  onCellClick, companyMode, blockWeekends
+  onCellClick, companyMode, blockWeekends, weekendDays = [0, 6]
 }: VacayMonthCardProps) {
-  const { language } = useTranslation()
-  const weekdays = language === 'de' ? WEEKDAYS_DE : WEEKDAYS_EN
-  const monthNames = language === 'de' ? MONTHS_DE : MONTHS_EN
+  const { t, locale } = useTranslation()
 
+  const weekdays = WEEKDAY_KEYS.map(k => t(k))
+  const monthName = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(year, month, 1)), [locale, year, month])
+  
   const weeks = useMemo(() => {
     const firstDay = new Date(year, month, 1)
     const daysInMonth = new Date(year, month + 1, 0).getDate()
@@ -47,7 +53,7 @@ export default function VacayMonthCard({
   return (
     <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
       <div className="px-3 py-2 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
-        <span className="text-xs font-semibold" style={{ color: 'var(--text-primary)' }}>{monthNames[month]}</span>
+        <span className="text-xs font-semibold" style={{ color: 'var(--text-primary)', textTransform: 'capitalize' }}>{monthName}</span>
       </div>
 
       <div className="grid grid-cols-7 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
@@ -65,7 +71,8 @@ export default function VacayMonthCard({
               if (day === null) return <div key={di} style={{ height: 28 }} />
 
               const dateStr = `${year}-${pad(month + 1)}-${pad(day)}`
-              const weekend = di >= 5
+              const dayOfWeek = new Date(year, month, day).getDay()
+              const weekend = weekendDays.includes(dayOfWeek)
               const holiday = holidays[dateStr]
               const isCompany = companyHolidaysEnabled && companyHolidaySet.has(dateStr)
               const dayEntries = entryMap[dateStr] || []
@@ -86,7 +93,7 @@ export default function VacayMonthCard({
                   onMouseEnter={e => { if (!isBlocked) e.currentTarget.style.background = 'var(--bg-hover)' }}
                   onMouseLeave={e => { e.currentTarget.style.background = weekend ? 'var(--bg-secondary)' : 'transparent' }}
                 >
-                  {holiday && <div className="absolute inset-0.5 rounded" style={{ background: 'rgba(239,68,68,0.12)' }} />}
+                  {holiday && <div className="absolute inset-0.5 rounded" style={{ background: hexToRgba(holiday.color, 0.12) }} />}
                   {isCompany && <div className="absolute inset-0.5 rounded" style={{ background: 'rgba(245,158,11,0.15)' }} />}
 
                   {dayEntries.length === 1 && (
@@ -115,7 +122,7 @@ export default function VacayMonthCard({
                   )}
 
                   <span className="relative z-[1] text-[11px] font-medium" style={{
-                    color: holiday ? '#dc2626' : weekend ? 'var(--text-faint)' : 'var(--text-primary)',
+                    color: holiday ? holiday.color : weekend ? 'var(--text-faint)' : 'var(--text-primary)',
                     fontWeight: dayEntries.length > 0 ? 700 : 500,
                   }}>
                     {day}

client/src/components/Vacay/VacaySettings.tsx

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react'
-import { MapPin, CalendarOff, AlertCircle, Building2, Unlink, ArrowRightLeft, Globe } from 'lucide-react'
+import { type LucideIcon, CalendarOff, AlertCircle, Building2, Unlink, ArrowRightLeft, Globe, Plus, Trash2 } from 'lucide-react'
 import { useVacayStore } from '../../store/vacayStore'
-import { useTranslation } from '../../i18n'
+import { getIntlLanguage, useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import apiClient from '../../api/client'
+import type { VacayHolidayCalendar } from '../../types'
 
 interface VacaySettingsProps {
   onClose: () => void
@@ -13,10 +14,9 @@ interface VacaySettingsProps {
 export default function VacaySettings({ onClose }: VacaySettingsProps) {
   const { t } = useTranslation()
   const toast = useToast()
-  const { plan, updatePlan, isFused, dissolve, users } = useVacayStore()
-  const [countries, setCountries] = useState([])
-  const [regions, setRegions] = useState([])
-  const [loadingRegions, setLoadingRegions] = useState(false)
+  const { plan, updatePlan, addHolidayCalendar, updateHolidayCalendar, deleteHolidayCalendar, isFused, dissolve, users } = useVacayStore()
+  const [countries, setCountries] = useState<{ value: string; label: string }[]>([])
+  const [showAddForm, setShowAddForm] = useState(false)
 
   const { language } = useTranslation()
 
@@ -24,7 +24,7 @@ export default function VacaySettings({ onClose }: VacaySettingsProps) {
   useEffect(() => {
     apiClient.get('/addons/vacay/holidays/countries').then(r => {
       let displayNames
-      try { displayNames = new Intl.DisplayNames([language === 'de' ? 'de' : 'en'], { type: 'region' }) } catch { /* */ }
+      try { displayNames = new Intl.DisplayNames([getIntlLanguage(language)], { type: 'region' }) } catch { /* */ }
       const list = r.data.map(c => ({
         value: c.countryCode,
         label: displayNames ? (displayNames.of(c.countryCode) || c.name) : c.name,
@@ -34,57 +34,9 @@ export default function VacaySettings({ onClose }: VacaySettingsProps) {
     }).catch(() => {})
   }, [language])
 
-  // When country changes, check if it has regions
-  const selectedCountry = plan?.holidays_region?.split('-')[0] || ''
-  const selectedRegion = plan?.holidays_region?.includes('-') ? plan.holidays_region : ''
-
-  useEffect(() => {
-    if (!selectedCountry || !plan?.holidays_enabled) { setRegions([]); return }
-    setLoadingRegions(true)
-    const year = new Date().getFullYear()
-    apiClient.get(`/addons/vacay/holidays/${year}/${selectedCountry}`).then(r => {
-      const allCounties = new Set()
-      r.data.forEach(h => {
-        if (h.counties) h.counties.forEach(c => allCounties.add(c))
-      })
-      if (allCounties.size > 0) {
-        let subdivisionNames
-        try { subdivisionNames = new Intl.DisplayNames([language === 'de' ? 'de' : 'en'], { type: 'region' }) } catch { /* */ }
-        const regionList = [...allCounties].sort().map(c => {
-          let label = c.split('-')[1] || c
-          // Try Intl for full subdivision name (not all browsers support subdivision codes)
-          // Fallback: use known mappings for DE
-          if (c.startsWith('DE-')) {
-            const deRegions = { BW:'Baden-Württemberg',BY:'Bayern',BE:'Berlin',BB:'Brandenburg',HB:'Bremen',HH:'Hamburg',HE:'Hessen',MV:'Mecklenburg-Vorpommern',NI:'Niedersachsen',NW:'Nordrhein-Westfalen',RP:'Rheinland-Pfalz',SL:'Saarland',SN:'Sachsen',ST:'Sachsen-Anhalt',SH:'Schleswig-Holstein',TH:'Thüringen' }
-            label = deRegions[c.split('-')[1]] || label
-          } else if (c.startsWith('CH-')) {
-            const chRegions = { AG:'Aargau',AI:'Appenzell Innerrhoden',AR:'Appenzell Ausserrhoden',BE:'Bern',BL:'Basel-Landschaft',BS:'Basel-Stadt',FR:'Freiburg',GE:'Genf',GL:'Glarus',GR:'Graubünden',JU:'Jura',LU:'Luzern',NE:'Neuenburg',NW:'Nidwalden',OW:'Obwalden',SG:'St. Gallen',SH:'Schaffhausen',SO:'Solothurn',SZ:'Schwyz',TG:'Thurgau',TI:'Tessin',UR:'Uri',VD:'Waadt',VS:'Wallis',ZG:'Zug',ZH:'Zürich' }
-            label = chRegions[c.split('-')[1]] || label
-          }
-          return { value: c, label }
-        })
-        setRegions(regionList)
-      } else {
-        setRegions([])
-        // If no regions, just set country code as region
-        if (plan.holidays_region !== selectedCountry) {
-          updatePlan({ holidays_region: selectedCountry })
-        }
-      }
-    }).catch(() => setRegions([])).finally(() => setLoadingRegions(false))
-  }, [selectedCountry, plan?.holidays_enabled])
-
   if (!plan) return null
 
-  const toggle = (key) => updatePlan({ [key]: !plan[key] })
-
-  const handleCountryChange = (countryCode) => {
-    updatePlan({ holidays_region: countryCode })
-  }
-
-  const handleRegionChange = (regionCode) => {
-    updatePlan({ holidays_region: regionCode })
-  }
+  const toggle = (key: string) => updatePlan({ [key]: !plan[key] })
 
   return (
     <div className="space-y-5">
@@ -97,6 +49,42 @@ export default function VacaySettings({ onClose }: VacaySettingsProps) {
         onChange={() => toggle('block_weekends')}
       />
 
+      {/* Weekend days selector */}
+      {plan.block_weekends !== false && (
+        <div style={{ paddingLeft: 36 }}>
+          <p className="text-xs font-medium mb-2" style={{ color: 'var(--text-muted)' }}>{t('vacay.weekendDays')}</p>
+          <div className="flex flex-wrap gap-1.5">
+            {[
+              { day: 1, label: t('vacay.mon') },
+              { day: 2, label: t('vacay.tue') },
+              { day: 3, label: t('vacay.wed') },
+              { day: 4, label: t('vacay.thu') },
+              { day: 5, label: t('vacay.fri') },
+              { day: 6, label: t('vacay.sat') },
+              { day: 0, label: t('vacay.sun') },
+            ].map(({ day, label }) => {
+              const current: number[] = plan.weekend_days ? String(plan.weekend_days).split(',').map(Number) : [0, 6]
+              const active = current.includes(day)
+              return (
+                <button key={day} onClick={() => {
+                  const next = active ? current.filter(d => d !== day) : [...current, day]
+                  updatePlan({ weekend_days: next.join(',') })
+                }}
+                  style={{
+                    padding: '4px 10px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer',
+                    fontFamily: 'inherit', border: '1px solid', transition: 'all 0.12s',
+                    background: active ? 'var(--text-primary)' : 'var(--bg-card)',
+                    borderColor: active ? 'var(--text-primary)' : 'var(--border-primary)',
+                    color: active ? 'var(--bg-primary)' : 'var(--text-muted)',
+                  }}>
+                  {label}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
       {/* Carry-over */}
       <SettingToggle
         icon={ArrowRightLeft}
@@ -136,21 +124,35 @@ export default function VacaySettings({ onClose }: VacaySettingsProps) {
         />
         {plan.holidays_enabled && (
           <div className="ml-7 mt-2 space-y-2">
-            <CustomSelect
-              value={selectedCountry}
-              onChange={handleCountryChange}
-              options={countries}
-              placeholder={t('vacay.selectCountry')}
-              searchable
-            />
-            {regions.length > 0 && (
-              <CustomSelect
-                value={selectedRegion}
-                onChange={handleRegionChange}
-                options={regions}
-                placeholder={t('vacay.selectRegion')}
-                searchable
+            {(plan.holiday_calendars ?? []).length === 0 && (
+              <p className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('vacay.noCalendars')}</p>
+            )}
+            {(plan.holiday_calendars ?? []).map(cal => (
+              <CalendarRow
+                key={cal.id}
+                cal={cal}
+                countries={countries}
+                language={language}
+                onUpdate={(data) => updateHolidayCalendar(cal.id, data)}
+                onDelete={() => deleteHolidayCalendar(cal.id)}
               />
+            ))}
+            {showAddForm ? (
+              <AddCalendarForm
+                countries={countries}
+                language={language}
+                onAdd={async (data) => { await addHolidayCalendar(data); setShowAddForm(false) }}
+                onCancel={() => setShowAddForm(false)}
+              />
+            ) : (
+              <button
+                onClick={() => setShowAddForm(true)}
+                className="flex items-center gap-1.5 text-xs px-2 py-1.5 rounded-md transition-colors"
+                style={{ color: 'var(--text-muted)', background: 'var(--bg-secondary)' }}
+              >
+                <Plus size={12} />
+                {t('vacay.addCalendar')}
+              </button>
             )}
           </div>
         )}
@@ -197,11 +199,11 @@ export default function VacaySettings({ onClose }: VacaySettingsProps) {
 }
 
 interface SettingToggleProps {
-  icon: React.ComponentType<{ size?: number; className?: string; style?: React.CSSProperties }>
+  icon: LucideIcon
   label: string
   hint: string
   value: boolean
-  onChange: (value: boolean) => void
+  onChange: () => void
 }
 
 function SettingToggle({ icon: Icon, label, hint, value, onChange }: SettingToggleProps) {
@@ -223,3 +225,202 @@ function SettingToggle({ icon: Icon, label, hint, value, onChange }: SettingTogg
     </div>
   )
 }
+
+// ── shared region-loading helper ─────────────────────────────────────────────
+async function fetchRegionOptions(country: string): Promise<{ value: string; label: string }[]> {
+  try {
+    const year = new Date().getFullYear()
+    const r = await apiClient.get(`/addons/vacay/holidays/${year}/${country}`)
+    const allCounties = new Set<string>()
+    r.data.forEach(h => { if (h.counties) h.counties.forEach(c => allCounties.add(c)) })
+    if (allCounties.size === 0) return []
+    return [...allCounties].sort().map(c => {
+      let label = c.split('-')[1] || c
+      if (c.startsWith('DE-')) {
+        const m: Record<string, string> = { BW:'Baden-Württemberg',BY:'Bayern',BE:'Berlin',BB:'Brandenburg',HB:'Bremen',HH:'Hamburg',HE:'Hessen',MV:'Mecklenburg-Vorpommern',NI:'Niedersachsen',NW:'Nordrhein-Westfalen',RP:'Rheinland-Pfalz',SL:'Saarland',SN:'Sachsen',ST:'Sachsen-Anhalt',SH:'Schleswig-Holstein',TH:'Thüringen' }
+        label = m[c.split('-')[1]] || label
+      } else if (c.startsWith('CH-')) {
+        const m: Record<string, string> = { AG:'Aargau',AI:'Appenzell Innerrhoden',AR:'Appenzell Ausserrhoden',BE:'Bern',BL:'Basel-Landschaft',BS:'Basel-Stadt',FR:'Freiburg',GE:'Genf',GL:'Glarus',GR:'Graubünden',JU:'Jura',LU:'Luzern',NE:'Neuenburg',NW:'Nidwalden',OW:'Obwalden',SG:'St. Gallen',SH:'Schaffhausen',SO:'Solothurn',SZ:'Schwyz',TG:'Thurgau',TI:'Tessin',UR:'Uri',VD:'Waadt',VS:'Wallis',ZG:'Zug',ZH:'Zürich' }
+        label = m[c.split('-')[1]] || label
+      }
+      return { value: c, label }
+    })
+  } catch {
+    return []
+  }
+}
+
+// ── Existing calendar row (inline edit) ──────────────────────────────────────
+function CalendarRow({ cal, countries, onUpdate, onDelete }: {
+  cal: VacayHolidayCalendar
+  countries: { value: string; label: string }[]
+  language: string
+  onUpdate: (data: { region?: string; color?: string; label?: string | null }) => void
+  onDelete: () => void
+}) {
+  const { t } = useTranslation()
+  const [localColor, setLocalColor] = useState(cal.color)
+  const [localLabel, setLocalLabel] = useState(cal.label || '')
+  const [regions, setRegions] = useState<{ value: string; label: string }[]>([])
+
+  const selectedCountry = cal.region.split('-')[0]
+  const selectedRegion = cal.region.includes('-') ? cal.region : ''
+
+  useEffect(() => { setLocalColor(cal.color) }, [cal.color])
+  useEffect(() => { setLocalLabel(cal.label || '') }, [cal.label])
+
+  useEffect(() => {
+    if (!selectedCountry) { setRegions([]); return }
+    fetchRegionOptions(selectedCountry).then(setRegions)
+  }, [selectedCountry])
+
+  const PRESET_COLORS = ['#fecaca', '#fed7aa', '#fde68a', '#bbf7d0', '#a5f3fc', '#c7d2fe', '#e9d5ff', '#fda4af', '#6366f1', '#ef4444', '#22c55e', '#3b82f6']
+  const [showColorPicker, setShowColorPicker] = useState(false)
+
+  return (
+    <div className="flex gap-3 items-start p-3 rounded-xl" style={{ background: 'var(--bg-secondary)' }}>
+      <div style={{ position: 'relative', flexShrink: 0 }}>
+        <button
+          onClick={() => setShowColorPicker(!showColorPicker)}
+          style={{ width: 28, height: 28, borderRadius: 8, background: localColor, border: '2px solid var(--border-primary)', cursor: 'pointer' }}
+          title={t('vacay.calendarColor')}
+        />
+        {showColorPicker && (
+          <div style={{ position: 'absolute', top: 34, left: 0, zIndex: 50, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12, padding: 8, boxShadow: '0 8px 24px rgba(0,0,0,0.12)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4, width: 120 }}>
+            {PRESET_COLORS.map(c => (
+              <button key={c} onClick={() => { setLocalColor(c); setShowColorPicker(false); if (c !== cal.color) onUpdate({ color: c }) }}
+                style={{ width: 24, height: 24, borderRadius: 6, background: c, border: localColor === c ? '2px solid var(--text-primary)' : '2px solid transparent', cursor: 'pointer' }} />
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="flex-1 min-w-0 space-y-1.5">
+        <input
+          type="text"
+          value={localLabel}
+          onChange={e => setLocalLabel(e.target.value)}
+          onBlur={() => { const v = localLabel.trim() || null; if (v !== cal.label) onUpdate({ label: v }) }}
+          onKeyDown={e => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
+          placeholder={t('vacay.calendarLabel')}
+          style={{ width: '100%', fontSize: 12, padding: '6px 10px', borderRadius: 8, background: 'var(--bg-input)', border: '1px solid var(--border-primary)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }}
+        />
+        <CustomSelect
+          value={selectedCountry}
+          onChange={v => onUpdate({ region: v })}
+          options={countries}
+          placeholder={t('vacay.selectCountry')}
+          searchable
+        />
+        {regions.length > 0 && (
+          <CustomSelect
+            value={selectedRegion}
+            onChange={v => onUpdate({ region: v })}
+            options={regions}
+            placeholder={t('vacay.selectRegion')}
+            searchable
+          />
+        )}
+      </div>
+      <button
+        onClick={onDelete}
+        className="shrink-0 p-1.5 rounded-md transition-colors"
+        style={{ color: 'var(--text-faint)' }}
+        onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.background = 'rgba(239,68,68,0.1)' }}
+        onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.background = 'transparent' }}
+      >
+        <Trash2 size={13} />
+      </button>
+    </div>
+  )
+}
+
+// ── Add-new-calendar form ─────────────────────────────────────────────────────
+function AddCalendarForm({ countries, onAdd, onCancel }: {
+  countries: { value: string; label: string }[]
+  language: string
+  onAdd: (data: { region: string; color: string; label: string | null }) => void
+  onCancel: () => void
+}) {
+  const { t } = useTranslation()
+  const [region, setRegion] = useState('')
+  const [color, setColor] = useState('#fecaca')
+  const [label, setLabel] = useState('')
+  const [regions, setRegions] = useState<{ value: string; label: string }[]>([])
+  const [loadingRegions, setLoadingRegions] = useState(false)
+
+  const selectedCountry = region.split('-')[0] || ''
+  const selectedRegion = region.includes('-') ? region : ''
+
+  useEffect(() => {
+    if (!selectedCountry) { setRegions([]); return }
+    setLoadingRegions(true)
+    fetchRegionOptions(selectedCountry).then(list => { setRegions(list) }).finally(() => setLoadingRegions(false))
+  }, [selectedCountry])
+
+  const canAdd = selectedCountry && (regions.length === 0 || selectedRegion !== '')
+
+  const PRESET_COLORS = ['#fecaca', '#fed7aa', '#fde68a', '#bbf7d0', '#a5f3fc', '#c7d2fe', '#e9d5ff', '#fda4af', '#6366f1', '#ef4444', '#22c55e', '#3b82f6']
+  const [showColorPicker, setShowColorPicker] = useState(false)
+
+  return (
+    <div className="flex gap-3 items-start p-3 rounded-xl border border-dashed" style={{ borderColor: 'var(--border-primary)' }}>
+      <div style={{ position: 'relative', flexShrink: 0 }}>
+        <button
+          onClick={() => setShowColorPicker(!showColorPicker)}
+          style={{ width: 28, height: 28, borderRadius: 8, background: color, border: '2px solid var(--border-primary)', cursor: 'pointer' }}
+          title={t('vacay.calendarColor')}
+        />
+        {showColorPicker && (
+          <div style={{ position: 'absolute', top: 34, left: 0, zIndex: 50, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12, padding: 8, boxShadow: '0 8px 24px rgba(0,0,0,0.12)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4, width: 120 }}>
+            {PRESET_COLORS.map(c => (
+              <button key={c} onClick={() => { setColor(c); setShowColorPicker(false) }}
+                style={{ width: 24, height: 24, borderRadius: 6, background: c, border: color === c ? '2px solid var(--text-primary)' : '2px solid transparent', cursor: 'pointer' }} />
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="flex-1 min-w-0 space-y-1.5">
+        <input
+          type="text"
+          value={label}
+          onChange={e => setLabel(e.target.value)}
+          placeholder={t('vacay.calendarLabel')}
+          style={{ width: '100%', fontSize: 12, padding: '6px 10px', borderRadius: 8, background: 'var(--bg-input)', border: '1px solid var(--border-primary)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }}
+        />
+        <CustomSelect
+          value={selectedCountry}
+          onChange={v => { setRegion(v); setRegions([]) }}
+          options={countries}
+          placeholder={t('vacay.selectCountry')}
+          searchable
+        />
+        {regions.length > 0 && (
+          <CustomSelect
+            value={selectedRegion}
+            onChange={v => setRegion(v)}
+            options={regions}
+            placeholder={t('vacay.selectRegion')}
+            searchable
+          />
+        )}
+        <div className="flex gap-1.5 pt-0.5">
+          <button
+            disabled={!canAdd}
+            onClick={() => onAdd({ region: region || selectedCountry, color, label: label.trim() || null })}
+            className="flex-1 text-xs px-2 py-1.5 rounded-md font-medium transition-colors disabled:opacity-40"
+            style={{ background: 'var(--text-primary)', color: 'var(--bg-card)' }}
+          >
+            {t('vacay.add')}
+          </button>
+          <button
+            onClick={onCancel}
+            className="text-xs px-2 py-1.5 rounded-md transition-colors"
+            style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/Vacay/holidays.ts

@@ -103,10 +103,9 @@ export function getHolidays(year: number, bundesland: string = 'NW'): Record<str
   return holidays
 }
 
-export function isWeekend(dateStr: string): boolean {
+export function isWeekend(dateStr: string, weekendDays: number[] = [0, 6]): boolean {
   const d = new Date(dateStr + 'T00:00:00')
-  const day = d.getDay()
-  return day === 0 || day === 6
+  return weekendDays.includes(d.getDay())
 }
 
 export function getWeekday(dateStr: string): string {
@@ -123,9 +122,9 @@ export function daysInMonth(year: number, month: number): number {
   return new Date(year, month, 0).getDate()
 }
 
-export function formatDate(dateStr: string): string {
+export function formatDate(dateStr: string, locale?: string): string {
   const d = new Date(dateStr + 'T00:00:00')
-  return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' })
+  return d.toLocaleDateString(locale || undefined, { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' })
 }
 
 export { BUNDESLAENDER }

client/src/components/shared/CustomDateTimePicker.tsx

@@ -11,9 +11,11 @@ interface CustomDatePickerProps {
   onChange: (value: string) => void
   placeholder?: string
   style?: React.CSSProperties
+  compact?: boolean
+  borderless?: boolean
 }
 
-export function CustomDatePicker({ value, onChange, placeholder, style = {} }: CustomDatePickerProps) {
+export function CustomDatePicker({ value, onChange, placeholder, style = {}, compact = false, borderless = false }: CustomDatePickerProps) {
   const { locale, t } = useTranslation()
   const [open, setOpen] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
@@ -45,7 +47,7 @@ export function CustomDatePicker({ value, onChange, placeholder, style = {} }: C
   const startDay = (getWeekday(viewYear, viewMonth, 1) + 6) % 7
   const weekdays = Array.from({ length: 7 }, (_, i) => new Date(2024, 0, i + 1).toLocaleDateString(locale, { weekday: 'narrow' }))
 
-  const displayValue = parsed ? parsed.toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' }) : null
+  const displayValue = parsed ? parsed.toLocaleDateString(locale, compact ? { day: '2-digit', month: '2-digit', year: '2-digit' } : { day: 'numeric', month: 'short', year: 'numeric' }) : null
 
   const selectDay = (day: number) => {
     const y = String(viewYear)
@@ -59,22 +61,57 @@ export function CustomDatePicker({ value, onChange, placeholder, style = {} }: C
   const today = new Date()
   const isToday = (d: number) => today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d
 
+  const [textInput, setTextInput] = useState('')
+  const [isTyping, setIsTyping] = useState(false)
+
+  const handleTextSubmit = () => {
+    setIsTyping(false)
+    if (!textInput.trim()) return
+    // Try to parse various date formats
+    const input = textInput.trim()
+    // ISO: 2026-03-29
+    if (/^\d{4}-\d{2}-\d{2}$/.test(input)) { onChange(input); return }
+    // EU: 29.03.2026 or 29/03/2026
+    const euMatch = input.match(/^(\d{1,2})[./](\d{1,2})[./](\d{2,4})$/)
+    if (euMatch) {
+      const y = euMatch[3].length === 2 ? 2000 + parseInt(euMatch[3]) : parseInt(euMatch[3])
+      onChange(`${y}-${String(euMatch[2]).padStart(2, '0')}-${String(euMatch[1]).padStart(2, '0')}`)
+      return
+    }
+    // Try native Date parse as fallback
+    const d = new Date(input)
+    if (!isNaN(d.getTime())) {
+      onChange(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`)
+    }
+  }
+
   return (
     <div ref={ref} style={{ position: 'relative', ...style }}>
-      <button type="button" onClick={() => setOpen(o => !o)}
+      {isTyping ? (
+        <input autoFocus type="text" value={textInput} onChange={e => setTextInput(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter') handleTextSubmit(); if (e.key === 'Escape') setIsTyping(false) }}
+          onBlur={handleTextSubmit}
+          placeholder="DD.MM.YYYY"
+          style={{
+            width: '100%', padding: '8px 14px', borderRadius: 10, border: '1px solid var(--text-faint)',
+            background: 'var(--bg-input)', color: 'var(--text-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none',
+          }} />
+      ) : (
+      <button type="button" onClick={() => setOpen(o => !o)} onDoubleClick={() => { setTextInput(value || ''); setIsTyping(true) }}
         style={{
-          width: '100%', display: 'flex', alignItems: 'center', gap: 8,
-          padding: '8px 14px', borderRadius: 10,
-          border: '1px solid var(--border-primary)',
-          background: 'var(--bg-input)', color: displayValue ? 'var(--text-primary)' : 'var(--text-faint)',
+          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: compact ? 4 : 8,
+          padding: compact ? '4px 6px' : '8px 14px', borderRadius: compact ? 4 : 10,
+          border: borderless ? 'none' : '1px solid var(--border-primary)',
+          background: borderless ? 'transparent' : 'var(--bg-input)', color: displayValue ? 'var(--text-primary)' : 'var(--text-faint)',
           fontSize: 13, fontFamily: 'inherit', cursor: 'pointer', outline: 'none',
           transition: 'border-color 0.15s',
         }}
         onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
         onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border-primary)' }}>
-        <Calendar size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+        {!compact && <Calendar size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />}
         <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{displayValue || placeholder || t('common.date')}</span>
       </button>
+      )}
 
       {open && ReactDOM.createPortal(
         <div ref={dropRef} style={{

client/src/components/shared/CustomSelect.tsx

@@ -19,6 +19,7 @@ interface CustomSelectProps {
   searchable?: boolean
   style?: React.CSSProperties
   size?: 'sm' | 'md'
+  disabled?: boolean
 }
 
 export default function CustomSelect({
@@ -29,6 +30,7 @@ export default function CustomSelect({
   searchable = false,
   style = {},
   size = 'md',
+  disabled = false,
 }: CustomSelectProps) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
@@ -83,17 +85,19 @@ export default function CustomSelect({
       {/* Trigger */}
       <button
         type="button"
-        onClick={() => { setOpen(o => !o); setSearch('') }}
+        disabled={disabled}
+        onClick={() => { if (!disabled) { setOpen(o => !o); setSearch('') } }}
         style={{
           width: '100%', display: 'flex', alignItems: 'center', gap: 8,
           padding: sm ? '8px 12px' : '8px 14px', borderRadius: 10,
           border: '1px solid var(--border-primary)',
           background: 'var(--bg-input)', color: 'var(--text-primary)',
           fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
-          cursor: 'pointer', outline: 'none', textAlign: 'left',
+          cursor: disabled ? 'default' : 'pointer', outline: 'none', textAlign: 'left',
           transition: 'border-color 0.15s', overflow: 'hidden', minWidth: 0,
+          opacity: disabled ? 0.5 : 1,
         }}
-        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
+        onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--text-faint)' }}
         onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border-primary)' }}
       >
         {selected?.icon && <span style={{ display: 'flex', flexShrink: 0 }}>{selected.icon}</span>}
@@ -107,9 +111,15 @@ export default function CustomSelect({
       {open && ReactDOM.createPortal(
         <div ref={dropRef} style={{
           position: 'fixed',
-          top: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.bottom + 4 : 0 })(),
-          left: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.left : 0 })(),
-          width: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.width : 200 })(),
+          ...(() => {
+            const r = ref.current?.getBoundingClientRect()
+            if (!r) return { top: 0, left: 0, width: 200 }
+            const spaceBelow = window.innerHeight - r.bottom
+            const openUp = spaceBelow < 220 && r.top > spaceBelow
+            return openUp
+              ? { bottom: window.innerHeight - r.top + 4, left: r.left, width: r.width }
+              : { top: r.bottom + 4, left: r.left, width: r.width }
+          })(),
           zIndex: 99999,
           background: 'var(--bg-card)',
           backdropFilter: 'blur(24px) saturate(180%)',

client/src/components/shared/CustomTimePicker.tsx

@@ -69,6 +69,7 @@ export default function CustomTimePicker({ value, onChange, placeholder = '00:00
   const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     const raw = e.target.value
     onChange(raw)
+    if (is12h) return // let handleBlur parse 12h formats
     const clean = raw.replace(/[^0-9:]/g, '')
     if (/^\d{2}:\d{2}$/.test(clean)) onChange(clean)
     else if (/^\d{4}$/.test(clean)) onChange(clean.slice(0, 2) + ':' + clean.slice(2))
@@ -80,7 +81,23 @@ export default function CustomTimePicker({ value, onChange, placeholder = '00:00
 
   const handleBlur = () => {
     if (!value) return
-    const clean = value.replace(/[^0-9:]/g, '')
+    const raw = value.trim()
+
+    // Parse 12h input like "5:30 PM", "5:30pm", "530pm"
+    if (is12h) {
+      const match12 = raw.match(/^(\d{1,2}):?(\d{2})?\s*(am|pm)$/i)
+      if (match12) {
+        let h = parseInt(match12[1])
+        const m = match12[2] ? parseInt(match12[2]) : 0
+        const isPm = match12[3].toLowerCase() === 'pm'
+        if (h === 12) h = isPm ? 12 : 0
+        else if (isPm) h += 12
+        onChange(String(Math.min(23, h)).padStart(2, '0') + ':' + String(Math.min(59, m)).padStart(2, '0'))
+        return
+      }
+    }
+
+    const clean = raw.replace(/[^0-9:]/g, '')
     if (/^\d{1,2}:\d{2}$/.test(clean)) {
       const [hh, mm] = clean.split(':')
       const h = Math.min(23, Math.max(0, parseInt(hh)))

client/src/components/shared/Modal.tsx

@@ -7,6 +7,7 @@ const sizeClasses: Record<string, string> = {
   lg: 'max-w-lg',
   xl: 'max-w-2xl',
   '2xl': 'max-w-4xl',
+  '3xl': 'max-w-5xl',
 }
 
 interface ModalProps {

client/src/components/shared/PlaceAvatar.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react'
-import { mapsApi } from '../../api/client'
+import React, { useState, useEffect, useRef } from 'react'
 import { getCategoryIcon } from './categoryIcons'
+import { getCached, isLoading, fetchPhoto, onThumbReady } from '../../services/photoService'
 import type { Place } from '../../types'
 
 interface Category {
@@ -14,48 +14,52 @@ interface PlaceAvatarProps {
   category?: Category | null
 }
 
-const photoCache = new Map<string, string | null>()
-const photoInFlight = new Set<string>()
-
-export default function PlaceAvatar({ place, size = 32, category }: PlaceAvatarProps) {
+export default React.memo(function PlaceAvatar({ place, size = 32, category }: PlaceAvatarProps) {
   const [photoSrc, setPhotoSrc] = useState<string | null>(place.image_url || null)
+  const [visible, setVisible] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  // Observe visibility — fetch photo only when avatar enters viewport
+  useEffect(() => {
+    if (place.image_url) { setVisible(true); return }
+    const el = ref.current
+    if (!el) return
+    // Check if already cached — show immediately without waiting for intersection
+    const photoId = place.google_place_id || place.osm_id
+    const cacheKey = photoId || `${place.lat},${place.lng}`
+    if (cacheKey && getCached(cacheKey)) { setVisible(true); return }
+
+    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); io.disconnect() } }, { rootMargin: '200px' })
+    io.observe(el)
+    return () => io.disconnect()
+  }, [place.id])
 
   useEffect(() => {
+    if (!visible) return
     if (place.image_url) { setPhotoSrc(place.image_url); return }
     const photoId = place.google_place_id || place.osm_id
     if (!photoId && !(place.lat && place.lng)) { setPhotoSrc(null); return }
 
     const cacheKey = photoId || `${place.lat},${place.lng}`
-    if (photoCache.has(cacheKey)) {
-      const cached = photoCache.get(cacheKey)
-      if (cached) setPhotoSrc(cached)
+
+    const cached = getCached(cacheKey)
+    if (cached) {
+      setPhotoSrc(cached.thumbDataUrl || cached.photoUrl)
+      if (!cached.thumbDataUrl && cached.photoUrl) {
+        return onThumbReady(cacheKey, thumb => setPhotoSrc(thumb))
+      }
       return
     }
 
-    if (photoInFlight.has(cacheKey)) {
-      // Another instance is already fetching, wait for it
-      const check = setInterval(() => {
-        if (photoCache.has(cacheKey)) {
-          clearInterval(check)
-          const cached = photoCache.get(cacheKey)
-          if (cached) setPhotoSrc(cached)
-        }
-      }, 200)
-      return () => clearInterval(check)
+    if (isLoading(cacheKey)) {
+      return onThumbReady(cacheKey, thumb => setPhotoSrc(thumb))
     }
-    photoInFlight.add(cacheKey)
-    mapsApi.placePhoto(photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
-      .then((data: { photoUrl?: string }) => {
-        if (data.photoUrl) {
-          photoCache.set(cacheKey, data.photoUrl)
-          setPhotoSrc(data.photoUrl)
-        } else {
-          photoCache.set(cacheKey, null)
-        }
-        photoInFlight.delete(cacheKey)
-      })
-      .catch(() => { photoCache.set(cacheKey, null); photoInFlight.delete(cacheKey) })
-  }, [place.id, place.image_url, place.google_place_id, place.osm_id])
+
+    fetchPhoto(cacheKey, photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name,
+      entry => { setPhotoSrc(entry.thumbDataUrl || entry.photoUrl) }
+    )
+    return onThumbReady(cacheKey, thumb => setPhotoSrc(thumb))
+  }, [visible, place.id, place.image_url, place.google_place_id, place.osm_id])
 
   const bgColor = category?.color || '#6366f1'
   const IconComp = getCategoryIcon(category?.icon)
@@ -72,10 +76,11 @@ export default function PlaceAvatar({ place, size = 32, category }: PlaceAvatarP
 
   if (photoSrc) {
     return (
-      <div style={containerStyle}>
+      <div ref={ref} style={containerStyle}>
         <img
           src={photoSrc}
           alt={place.name}
+          decoding="async"
           style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           onError={() => setPhotoSrc(null)}
         />
@@ -84,8 +89,8 @@ export default function PlaceAvatar({ place, size = 32, category }: PlaceAvatarP
   }
 
   return (
-    <div style={containerStyle}>
+    <div ref={ref} style={containerStyle}>
       <IconComp size={iconSize} strokeWidth={1.8} color="rgba(255,255,255,0.92)" />
     </div>
   )
-}
+})

client/src/hooks/useRouteCalculation.ts

@@ -19,7 +19,8 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
   const updateRouteForDay = useCallback(async (dayId: number | null) => {
     if (routeAbortRef.current) routeAbortRef.current.abort()
     if (!dayId) { setRoute(null); setRouteSegments([]); return }
-    const da = (tripStore.assignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index)
+    const currentAssignments = tripStore.assignments || {}
+    const da = (currentAssignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index)
     const waypoints = da.map((a) => a.place).filter((p) => p?.lat && p?.lng)
     if (waypoints.length < 2) { setRoute(null); setRouteSegments([]); return }
     setRoute(waypoints.map((p) => [p.lat!, p.lng!]))
@@ -33,12 +34,14 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       if (err instanceof Error && err.name !== 'AbortError') setRouteSegments([])
       else if (!(err instanceof Error)) setRouteSegments([])
     }
-  }, [tripStore, routeCalcEnabled])
+  }, [routeCalcEnabled])
 
+  // Only recalculate when assignments for the SELECTED day change
+  const selectedDayAssignments = selectedDayId ? tripStore.assignments?.[String(selectedDayId)] : null
   useEffect(() => {
     if (!selectedDayId) { setRoute(null); setRouteSegments([]); return }
     updateRouteForDay(selectedDayId)
-  }, [selectedDayId, tripStore.assignments])
+  }, [selectedDayId, selectedDayAssignments])
 
   return { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
 }

client/src/i18n/TranslationContext.tsx

@@ -1,11 +1,51 @@
-import React, { createContext, useContext, useMemo, ReactNode } from 'react'
+import React, { createContext, useContext, useEffect, useMemo, ReactNode } from 'react'
 import { useSettingsStore } from '../store/settingsStore'
 import de from './translations/de'
 import en from './translations/en'
+import es from './translations/es'
+import fr from './translations/fr'
+import hu from './translations/hu'
+import it from './translations/it'
+import ru from './translations/ru'
+import zh from './translations/zh'
+import nl from './translations/nl'
+import ar from './translations/ar'
+import br from './translations/br'
+import cs from './translations/cs'
 
-type TranslationStrings = Record<string, string>
+type TranslationStrings = Record<string, string | { name: string; category: string }[]>
 
-const translations: Record<string, TranslationStrings> = { de, en }
+export const SUPPORTED_LANGUAGES = [
+  { value: 'de', label: 'Deutsch' },
+  { value: 'en', label: 'English' },
+  { value: 'es', label: 'Español' },
+  { value: 'fr', label: 'Français' },
+  { value: 'hu', label: 'Magyar' },
+  { value: 'nl', label: 'Nederlands' },
+  { value: 'br', label: 'Português (Brasil)' },
+  { value: 'cs', label: 'Česky' },
+  { value: 'ru', label: 'Русский' },
+  { value: 'zh', label: '中文' },
+  { value: 'it', label: 'Italiano' },
+  { value: 'ar', label: 'العربية' },
+] as const
+
+const translations: Record<string, TranslationStrings> = { de, en, es, fr, hu, it, ru, zh, nl, ar, br, cs }
+const LOCALES: Record<string, string> = { de: 'de-DE', en: 'en-US', es: 'es-ES', fr: 'fr-FR', hu: 'hu-HU', it: 'it-IT', ru: 'ru-RU', zh: 'zh-CN', nl: 'nl-NL', ar: 'ar-SA', br: 'pt-BR', cs: 'cs-CZ' }
+const RTL_LANGUAGES = new Set(['ar'])
+
+export function getLocaleForLanguage(language: string): string {
+  return LOCALES[language] || LOCALES.en
+}
+
+export function getIntlLanguage(language: string): string {
+  if (language === 'br') return 'pt-BR'
+  return ['de', 'es', 'fr', 'hu', 'it', 'ru', 'zh', 'nl', 'ar', 'cs'].includes(language) ? language : 'en'
+}
+
+export function isRtlLanguage(language: string): boolean {
+  return RTL_LANGUAGES.has(language)
+}
 
 interface TranslationContextValue {
   t: (key: string, params?: Record<string, string | number>) => string
@@ -13,21 +53,26 @@ interface TranslationContextValue {
   locale: string
 }
 
-const TranslationContext = createContext<TranslationContextValue>({ t: (k: string) => k, language: 'de', locale: 'de-DE' })
+const TranslationContext = createContext<TranslationContextValue>({ t: (k: string) => k, language: 'en', locale: 'en-US' })
 
 interface TranslationProviderProps {
   children: ReactNode
 }
 
 export function TranslationProvider({ children }: TranslationProviderProps) {
-  const language = useSettingsStore((s) => s.settings.language) || 'de'
+  const language = useSettingsStore((s) => s.settings.language) || 'en'
+
+  useEffect(() => {
+    document.documentElement.lang = language
+    document.documentElement.dir = isRtlLanguage(language) ? 'rtl' : 'ltr'
+  }, [language])
 
   const value = useMemo((): TranslationContextValue => {
-    const strings = translations[language] || translations.de
-    const fallback = translations.de
+    const strings = translations[language] || translations.en
+    const fallback = translations.en
 
     function t(key: string, params?: Record<string, string | number>): string {
-      let val: string = strings[key] ?? fallback[key] ?? key
+      let val: string = (strings[key] ?? fallback[key] ?? key) as string
       if (params) {
         Object.entries(params).forEach(([k, v]) => {
           val = val.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v))
@@ -36,7 +81,7 @@ export function TranslationProvider({ children }: TranslationProviderProps) {
       return val
     }
 
-    return { t, language, locale: language === 'en' ? 'en-US' : 'de-DE' }
+    return { t, language, locale: getLocaleForLanguage(language) }
   }, [language])
 
   return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>

client/src/i18n/index.ts

@@ -1 +1,8 @@
-export { TranslationProvider, useTranslation } from './TranslationContext'
+export {
+  TranslationProvider,
+  useTranslation,
+  getLocaleForLanguage,
+  getIntlLanguage,
+  isRtlLanguage,
+  SUPPORTED_LANGUAGES,
+} from './TranslationContext'

client/src/i18n/translations/de.ts

@@ -1,4 +1,4 @@
-const de: Record<string, string> = {
+const de: Record<string, string | { name: string; category: string }[]> = {
   // Allgemein
   'common.save': 'Speichern',
   'common.cancel': 'Abbrechen',
@@ -6,6 +6,7 @@ const de: Record<string, string> = {
   'common.edit': 'Bearbeiten',
   'common.add': 'Hinzufügen',
   'common.loading': 'Laden...',
+  'common.import': 'Importieren',
   'common.error': 'Fehler',
   'common.back': 'Zurück',
   'common.all': 'Alle',
@@ -25,6 +26,14 @@ const de: Record<string, string> = {
   'common.email': 'E-Mail',
   'common.password': 'Passwort',
   'common.saving': 'Speichern...',
+  'common.saved': 'Gespeichert',
+  'trips.reminder': 'Erinnerung',
+  'trips.reminderNone': 'Keine',
+  'trips.reminderDay': 'Tag',
+  'trips.reminderDays': 'Tage',
+  'trips.reminderCustom': 'Benutzerdefiniert',
+  'trips.reminderDaysBefore': 'Tage vor Abreise',
+  'trips.reminderDisabledHint': 'Reiseerinnerungen sind deaktiviert. Aktivieren Sie sie unter Admin > Einstellungen > Benachrichtigungen.',
   'common.update': 'Aktualisieren',
   'common.change': 'Ändern',
   'common.uploading': 'Hochladen…',
@@ -51,9 +60,18 @@ const de: Record<string, string> = {
   'dashboard.subtitle.activeMany': '{count} aktive Reisen',
   'dashboard.subtitle.archivedSuffix': ' · {count} archiviert',
   'dashboard.newTrip': 'Neue Reise',
+  'dashboard.gridView': 'Kachelansicht',
+  'dashboard.listView': 'Listenansicht',
   'dashboard.currency': 'Währung',
   'dashboard.timezone': 'Zeitzonen',
   'dashboard.localTime': 'Lokal',
+  'dashboard.timezoneCustomTitle': 'Eigene Zeitzone',
+  'dashboard.timezoneCustomLabelPlaceholder': 'Bezeichnung (optional)',
+  'dashboard.timezoneCustomTzPlaceholder': 'z.B. America/New_York',
+  'dashboard.timezoneCustomAdd': 'Hinzufügen',
+  'dashboard.timezoneCustomErrorEmpty': 'Zeitzone eingeben',
+  'dashboard.timezoneCustomErrorInvalid': 'Ungültige Zeitzone. Format: Europe/Berlin',
+  'dashboard.timezoneCustomErrorDuplicate': 'Bereits hinzugefügt',
   'dashboard.emptyTitle': 'Noch keine Reisen',
   'dashboard.emptyText': 'Erstelle deine erste Reise und beginne mit der Planung von Orten, Tagesabläufen und Packlisten.',
   'dashboard.emptyButton': 'Erste Reise erstellen',
@@ -92,7 +110,9 @@ const de: Record<string, string> = {
   'dashboard.endDate': 'Enddatum',
   'dashboard.noDateHint': 'Kein Datum gesetzt — es werden 7 Standardtage erstellt. Du kannst das jederzeit ändern.',
   'dashboard.coverImage': 'Titelbild',
-  'dashboard.addCoverImage': 'Titelbild hinzufügen',
+  'dashboard.addCoverImage': 'Titelbild hinzufügen (oder per Drag & Drop)',
+  'dashboard.addMembers': 'Reisebegleiter',
+  'dashboard.addMember': 'Mitglied hinzufügen',
   'dashboard.coverSaved': 'Titelbild gespeichert',
   'dashboard.coverUploadError': 'Fehler beim Hochladen',
   'dashboard.coverRemoveError': 'Fehler beim Entfernen',
@@ -128,8 +148,94 @@ const de: Record<string, string> = {
   'settings.temperature': 'Temperatureinheit',
   'settings.timeFormat': 'Zeitformat',
   'settings.routeCalculation': 'Routenberechnung',
+  'settings.blurBookingCodes': 'Buchungscodes verbergen',
+  'settings.notifications': 'Benachrichtigungen',
+  'settings.notifyTripInvite': 'Trip-Einladungen',
+  'settings.notifyBookingChange': 'Buchungsänderungen',
+  'settings.notifyTripReminder': 'Trip-Erinnerungen',
+  'settings.notifyVacayInvite': 'Vacay Fusion-Einladungen',
+  'settings.notifyPhotosShared': 'Geteilte Fotos (Immich)',
+  'settings.notifyCollabMessage': 'Chat-Nachrichten (Collab)',
+  'settings.notifyPackingTagged': 'Packliste: Zuweisungen',
+  'settings.notifyWebhook': 'Webhook-Benachrichtigungen',
+  'settings.notificationsDisabled': 'Benachrichtigungen sind nicht konfiguriert. Bitten Sie einen Administrator, E-Mail- oder Webhook-Benachrichtungen zu aktivieren.',
+  'settings.notificationsActive': 'Aktiver Kanal',
+  'settings.notificationsManagedByAdmin': 'Benachrichtigungsereignisse werden vom Administrator konfiguriert.',
+  'admin.notifications.title': 'Benachrichtigungen',
+  'admin.notifications.hint': 'Wählen Sie einen Benachrichtigungskanal. Es kann nur einer gleichzeitig aktiv sein.',
+  'admin.notifications.none': 'Deaktiviert',
+  'admin.notifications.email': 'E-Mail (SMTP)',
+  'admin.notifications.webhook': 'Webhook',
+  'admin.notifications.events': 'Benachrichtigungsereignisse',
+  'admin.notifications.eventsHint': 'Wähle, welche Ereignisse Benachrichtigungen für alle Benutzer auslösen.',
+  'admin.notifications.configureFirst': 'Konfiguriere zuerst die SMTP- oder Webhook-Einstellungen unten, dann aktiviere die Events.',
+  'admin.notifications.save': 'Benachrichtigungseinstellungen speichern',
+  'admin.notifications.saved': 'Benachrichtigungseinstellungen gespeichert',
+  'admin.notifications.testWebhook': 'Test-Webhook senden',
+  'admin.notifications.testWebhookSuccess': 'Test-Webhook erfolgreich gesendet',
+  'admin.notifications.testWebhookFailed': 'Test-Webhook fehlgeschlagen',
+  'admin.smtp.title': 'E-Mail & Benachrichtigungen',
+  'admin.smtp.hint': 'SMTP-Konfiguration zum Versenden von E-Mail-Benachrichtigungen.',
+  'admin.smtp.testButton': 'Test-E-Mail senden',
+  'admin.webhook.hint': 'Benachrichtigungen an einen externen Webhook senden (Discord, Slack usw.).',
+  'admin.smtp.testSuccess': 'Test-E-Mail erfolgreich gesendet',
+  'admin.smtp.testFailed': 'Test-E-Mail fehlgeschlagen',
+  'dayplan.icsTooltip': 'Kalender exportieren (ICS)',
+  'share.linkTitle': 'Öffentlicher Link',
+  'share.linkHint': 'Erstelle einen Link den jeder ohne Login nutzen kann, um diese Reise anzuschauen. Nur lesen — keine Bearbeitung möglich.',
+  'share.createLink': 'Link erstellen',
+  'share.deleteLink': 'Link löschen',
+  'share.createError': 'Link konnte nicht erstellt werden',
+  'common.copy': 'Kopieren',
+  'common.copied': 'Kopiert',
+  'share.permMap': 'Karte & Plan',
+  'share.permBookings': 'Buchungen',
+  'share.permPacking': 'Packliste',
+  'shared.expired': 'Link abgelaufen oder ungültig',
+  'shared.expiredHint': 'Dieser geteilte Reise-Link ist nicht mehr aktiv.',
+  'shared.readOnly': 'Nur-Lesen Ansicht',
+  'shared.tabPlan': 'Plan',
+  'shared.tabBookings': 'Buchungen',
+  'shared.tabPacking': 'Packliste',
+  'shared.tabBudget': 'Budget',
+  'shared.tabChat': 'Chat',
+  'shared.days': 'Tage',
+  'shared.places': 'Orte',
+  'shared.other': 'Sonstige',
+  'shared.totalBudget': 'Gesamtbudget',
+  'shared.messages': 'Nachrichten',
+  'shared.sharedVia': 'Geteilt über',
+  'shared.confirmed': 'Bestätigt',
+  'shared.pending': 'Ausstehend',
+  'share.permBudget': 'Budget',
+  'share.permCollab': 'Chat',
   'settings.on': 'An',
   'settings.off': 'Aus',
+  'settings.mcp.title': 'MCP-Konfiguration',
+  'settings.mcp.endpoint': 'MCP-Endpunkt',
+  'settings.mcp.clientConfig': 'Client-Konfiguration',
+  'settings.mcp.clientConfigHint': 'Ersetze <your_token> durch ein API-Token aus der Liste unten. Der Pfad zu npx muss ggf. für dein System angepasst werden (z. B. C:\\PROGRA~1\\nodejs\\npx.cmd unter Windows).',
+  'settings.mcp.copy': 'Kopieren',
+  'settings.mcp.copied': 'Kopiert!',
+  'settings.mcp.apiTokens': 'API-Tokens',
+  'settings.mcp.createToken': 'Neuen Token erstellen',
+  'settings.mcp.noTokens': 'Noch keine Tokens. Erstelle einen, um MCP-Clients zu verbinden.',
+  'settings.mcp.tokenCreatedAt': 'Erstellt',
+  'settings.mcp.tokenUsedAt': 'Verwendet',
+  'settings.mcp.deleteTokenTitle': 'Token löschen',
+  'settings.mcp.deleteTokenMessage': 'Dieser Token wird sofort ungültig. Jeder MCP-Client, der ihn verwendet, verliert den Zugang.',
+  'settings.mcp.modal.createTitle': 'API-Token erstellen',
+  'settings.mcp.modal.tokenName': 'Token-Name',
+  'settings.mcp.modal.tokenNamePlaceholder': 'z. B. Claude Desktop, Arbeits-Laptop',
+  'settings.mcp.modal.creating': 'Wird erstellt…',
+  'settings.mcp.modal.create': 'Token erstellen',
+  'settings.mcp.modal.createdTitle': 'Token erstellt',
+  'settings.mcp.modal.createdWarning': 'Dieser Token wird nur einmal angezeigt. Kopiere und speichere ihn jetzt — er kann nicht wiederhergestellt werden.',
+  'settings.mcp.modal.done': 'Fertig',
+  'settings.mcp.toast.created': 'Token erstellt',
+  'settings.mcp.toast.createError': 'Token konnte nicht erstellt werden',
+  'settings.mcp.toast.deleted': 'Token gelöscht',
+  'settings.mcp.toast.deleteError': 'Token konnte nicht gelöscht werden',
   'settings.account': 'Konto',
   'settings.username': 'Benutzername',
   'settings.email': 'E-Mail',
@@ -137,6 +243,7 @@ const de: Record<string, string> = {
   'settings.roleAdmin': 'Administrator',
   'settings.oidcLinked': 'Verknüpft mit',
   'settings.changePassword': 'Passwort ändern',
+  'settings.mustChangePassword': 'Sie müssen Ihr Passwort ändern, bevor Sie fortfahren können. Bitte legen Sie unten ein neues Passwort fest.',
   'settings.currentPassword': 'Aktuelles Passwort',
   'settings.currentPasswordRequired': 'Aktuelles Passwort wird benötigt',
   'settings.newPassword': 'Neues Passwort',
@@ -145,7 +252,7 @@ const de: Record<string, string> = {
   'settings.passwordRequired': 'Bitte aktuelles und neues Passwort eingeben',
   'settings.passwordTooShort': 'Passwort muss mindestens 8 Zeichen lang sein',
   'settings.passwordMismatch': 'Passwörter stimmen nicht überein',
-  'settings.passwordWeak': 'Passwort muss Groß-, Kleinbuchstaben und eine Zahl enthalten',
+  'settings.passwordWeak': 'Passwort muss Groß-, Kleinbuchstaben, eine Zahl und ein Sonderzeichen enthalten',
   'settings.passwordChanged': 'Passwort erfolgreich geändert',
   'settings.deleteAccount': 'Löschen',
   'settings.deleteAccountTitle': 'Account wirklich löschen?',
@@ -164,6 +271,30 @@ const de: Record<string, string> = {
   'settings.avatarUploaded': 'Profilbild aktualisiert',
   'settings.avatarRemoved': 'Profilbild entfernt',
   'settings.avatarError': 'Fehler beim Hochladen',
+  'settings.mfa.title': 'Zwei-Faktor-Authentifizierung (2FA)',
+  'settings.mfa.description': 'Zusätzlicher Schritt bei der Anmeldung mit E-Mail und Passwort. Nutze eine Authenticator-App (Google Authenticator, Authy, …).',
+  'settings.mfa.requiredByPolicy': 'Dein Administrator verlangt Zwei-Faktor-Authentifizierung. Richte unten eine Authenticator-App ein, bevor du fortfährst.',
+  'settings.mfa.backupTitle': 'Backup-Codes',
+  'settings.mfa.backupDescription': 'Verwende diese Einmal-Codes, wenn du keinen Zugriff mehr auf deine Authenticator-App hast.',
+  'settings.mfa.backupWarning': 'Jetzt speichern. Jeder Code kann nur einmal verwendet werden.',
+  'settings.mfa.backupCopy': 'Codes kopieren',
+  'settings.mfa.backupDownload': 'TXT herunterladen',
+  'settings.mfa.backupPrint': 'Drucken / PDF',
+  'settings.mfa.backupCopied': 'Backup-Codes kopiert',
+  'settings.mfa.enabled': '2FA ist für dein Konto aktiv.',
+  'settings.mfa.disabled': '2FA ist nicht aktiviert.',
+  'settings.mfa.setup': 'Authenticator einrichten',
+  'settings.mfa.scanQr': 'QR-Code mit der App scannen oder den Schlüssel manuell eingeben.',
+  'settings.mfa.secretLabel': 'Geheimer Schlüssel (manuell)',
+  'settings.mfa.codePlaceholder': '6-stelliger Code',
+  'settings.mfa.enable': '2FA aktivieren',
+  'settings.mfa.cancelSetup': 'Abbrechen',
+  'settings.mfa.disableTitle': '2FA deaktivieren',
+  'settings.mfa.disableHint': 'Passwort und einen aktuellen Code aus der Authenticator-App eingeben.',
+  'settings.mfa.disable': '2FA deaktivieren',
+  'settings.mfa.toastEnabled': 'Zwei-Faktor-Authentifizierung aktiviert',
+  'settings.mfa.toastDisabled': 'Zwei-Faktor-Authentifizierung deaktiviert',
+  'settings.mfa.demoBlocked': 'In der Demo nicht verfügbar',
 
   // Login
   'login.error': 'Anmeldung fehlgeschlagen. Bitte Zugangsdaten prüfen.',
@@ -192,6 +323,8 @@ const de: Record<string, string> = {
   'login.signIn': 'Anmelden',
   'login.createAdmin': 'Admin-Konto erstellen',
   'login.createAdminHint': 'Erstelle das erste Admin-Konto für TREK.',
+  'login.setNewPassword': 'Neues Passwort festlegen',
+  'login.setNewPasswordHint': 'Sie müssen Ihr Passwort ändern, bevor Sie fortfahren können.',
   'login.createAccount': 'Konto erstellen',
   'login.createAccountHint': 'Neues Konto registrieren.',
   'login.creating': 'Erstelle…',
@@ -206,11 +339,19 @@ const de: Record<string, string> = {
   'login.oidc.invalidState': 'Ungültige Sitzung. Bitte erneut versuchen.',
   'login.demoFailed': 'Demo-Login fehlgeschlagen',
   'login.oidcSignIn': 'Anmelden mit {name}',
+  'login.oidcOnly': 'Passwort-Authentifizierung ist deaktiviert. Bitte melde dich über deinen SSO-Anbieter an.',
   'login.demoHint': 'Demo ausprobieren — ohne Registrierung',
+  'login.mfaTitle': 'Zwei-Faktor-Authentifizierung',
+  'login.mfaSubtitle': 'Gib den 6-stelligen Code aus deiner Authenticator-App ein.',
+  'login.mfaCodeLabel': 'Bestätigungscode',
+  'login.mfaCodeRequired': 'Bitte den Code aus der Authenticator-App eingeben.',
+  'login.mfaHint': 'Google Authenticator, Authy oder eine andere TOTP-App öffnen.',
+  'login.mfaBack': '← Zurück zur Anmeldung',
+  'login.mfaVerify': 'Bestätigen',
 
   // Register
   'register.passwordMismatch': 'Passwörter stimmen nicht überein',
-  'register.passwordTooShort': 'Passwort muss mindestens 6 Zeichen lang sein',
+  'register.passwordTooShort': 'Passwort muss mindestens 8 Zeichen lang sein',
   'register.failed': 'Registrierung fehlgeschlagen',
   'register.getStarted': 'Jetzt starten',
   'register.subtitle': 'Erstellen Sie ein Konto und beginnen Sie, Ihre Traumreisen zu planen.',
@@ -236,6 +377,7 @@ const de: Record<string, string> = {
   'admin.tabs.users': 'Benutzer',
   'admin.tabs.categories': 'Kategorien',
   'admin.tabs.backup': 'Backup',
+  'admin.tabs.audit': 'Audit-Protokoll',
   'admin.stats.users': 'Benutzer',
   'admin.stats.trips': 'Reisen',
   'admin.stats.places': 'Orte',
@@ -264,9 +406,29 @@ const de: Record<string, string> = {
   'admin.toast.createError': 'Fehler beim Erstellen des Benutzers',
   'admin.toast.fieldsRequired': 'Benutzername, E-Mail und Passwort sind erforderlich',
   'admin.createUser': 'Benutzer anlegen',
+  'admin.invite.title': 'Einladungslinks',
+  'admin.invite.subtitle': 'Einmal-Links für die Registrierung erstellen',
+  'admin.invite.create': 'Link erstellen',
+  'admin.invite.createAndCopy': 'Erstellen & kopieren',
+  'admin.invite.empty': 'Noch keine Einladungslinks erstellt',
+  'admin.invite.maxUses': 'Max. Nutzungen',
+  'admin.invite.expiry': 'Gültig für',
+  'admin.invite.uses': 'genutzt',
+  'admin.invite.expiresAt': 'läuft ab am',
+  'admin.invite.createdBy': 'von',
+  'admin.invite.active': 'Aktiv',
+  'admin.invite.expired': 'Abgelaufen',
+  'admin.invite.usedUp': 'Aufgebraucht',
+  'admin.invite.copied': 'Einladungslink in Zwischenablage kopiert',
+  'admin.invite.copyLink': 'Link kopieren',
+  'admin.invite.deleted': 'Einladungslink gelöscht',
+  'admin.invite.createError': 'Fehler beim Erstellen des Einladungslinks',
+  'admin.invite.deleteError': 'Fehler beim Löschen des Einladungslinks',
   'admin.tabs.settings': 'Einstellungen',
   'admin.allowRegistration': 'Registrierung erlauben',
   'admin.allowRegistrationHint': 'Neue Benutzer können sich selbst registrieren',
+  'admin.requireMfa': 'Zwei-Faktor-Authentifizierung (2FA) für alle verlangen',
+  'admin.requireMfaHint': 'Benutzer ohne 2FA müssen die Einrichtung unter Einstellungen abschließen, bevor sie die App nutzen können.',
   'admin.apiKeys': 'API-Schlüssel',
   'admin.apiKeysHint': 'Optional. Aktiviert erweiterte Ortsdaten wie Fotos und Wetter.',
   'admin.mapsKey': 'Google Maps API Key',
@@ -285,6 +447,8 @@ const de: Record<string, string> = {
   'admin.oidcIssuer': 'Issuer URL',
   'admin.oidcIssuerHint': 'Die OpenID Connect Issuer URL des Anbieters. z.B. https://accounts.google.com',
   'admin.oidcSaved': 'OIDC-Konfiguration gespeichert',
+  'admin.oidcOnlyMode': 'Passwort-Authentifizierung deaktivieren',
+  'admin.oidcOnlyModeHint': 'Wenn aktiviert, ist nur SSO-Login erlaubt. Passwort-Login und Registrierung werden blockiert.',
 
   // File Types
   'admin.fileTypes': 'Erlaubte Dateitypen',
@@ -292,18 +456,59 @@ const de: Record<string, string> = {
   'admin.fileTypesFormat': 'Kommagetrennte Endungen (z.B. jpg,png,pdf,doc). Verwende * um alle Typen zu erlauben.',
   'admin.fileTypesSaved': 'Dateityp-Einstellungen gespeichert',
 
+  // Packing Templates & Bag Tracking
+  'admin.bagTracking.title': 'Gepäck-Tracking',
+  'admin.bagTracking.subtitle': 'Gewicht und Gepäckstück-Zuordnung für Packlisteneinträge aktivieren',
+  'admin.tabs.config': 'Konfiguration',
+  'admin.tabs.templates': 'Packvorlagen',
+  'admin.packingTemplates.title': 'Packvorlagen',
+  'admin.packingTemplates.subtitle': 'Wiederverwendbare Packlisten für deine Reisen erstellen',
+  'admin.packingTemplates.create': 'Neue Vorlage',
+  'admin.packingTemplates.namePlaceholder': 'Vorlagenname (z.B. Strandurlaub)',
+  'admin.packingTemplates.empty': 'Noch keine Vorlagen erstellt',
+  'admin.packingTemplates.items': 'Einträge',
+  'admin.packingTemplates.categories': 'Kategorien',
+  'admin.packingTemplates.itemName': 'Artikelname',
+  'admin.packingTemplates.itemCategory': 'Kategorie',
+  'admin.packingTemplates.categoryName': 'Kategoriename (z.B. Kleidung)',
+  'admin.packingTemplates.addCategory': 'Kategorie hinzufügen',
+  'admin.packingTemplates.created': 'Vorlage erstellt',
+  'admin.packingTemplates.deleted': 'Vorlage gelöscht',
+  'admin.packingTemplates.loadError': 'Vorlagen konnten nicht geladen werden',
+  'admin.packingTemplates.createError': 'Vorlage konnte nicht erstellt werden',
+  'admin.packingTemplates.deleteError': 'Vorlage konnte nicht gelöscht werden',
+  'admin.packingTemplates.saveError': 'Fehler beim Speichern',
+
   // Addons
   'admin.tabs.addons': 'Addons',
   'admin.addons.title': 'Addons',
   'admin.addons.subtitle': 'Aktiviere oder deaktiviere Funktionen, um TREK nach deinen Wünschen anzupassen.',
+  'admin.addons.catalog.packing.name': 'Packliste',
+  'admin.addons.catalog.packing.description': 'Checklisten zum Kofferpacken für jede Reise',
+  'admin.addons.catalog.budget.name': 'Budget',
+  'admin.addons.catalog.budget.description': 'Ausgaben verfolgen und Reisebudget planen',
+  'admin.addons.catalog.documents.name': 'Dokumente',
+  'admin.addons.catalog.documents.description': 'Reisedokumente speichern und verwalten',
+  'admin.addons.catalog.vacay.name': 'Vacay',
+  'admin.addons.catalog.vacay.description': 'Persönlicher Urlaubsplaner mit Kalenderansicht',
+  'admin.addons.catalog.atlas.name': 'Atlas',
+  'admin.addons.catalog.atlas.description': 'Weltkarte mit besuchten Ländern und Reisestatistiken',
+  'admin.addons.catalog.collab.name': 'Collab',
+  'admin.addons.catalog.collab.description': 'Echtzeit-Notizen, Umfragen und Chat für die Reiseplanung',
+  'admin.addons.catalog.memories.name': 'Fotos (Immich)',
+  'admin.addons.catalog.memories.description': 'Reisefotos über deine Immich-Instanz teilen',
+  'admin.addons.catalog.mcp.name': 'MCP',
+  'admin.addons.catalog.mcp.description': 'Model Context Protocol für die KI-Assistenten-Integration',
   'admin.addons.subtitleBefore': 'Aktiviere oder deaktiviere Funktionen, um ',
   'admin.addons.subtitleAfter': ' nach deinen Wünschen anzupassen.',
   'admin.addons.enabled': 'Aktiviert',
   'admin.addons.disabled': 'Deaktiviert',
   'admin.addons.type.trip': 'Trip',
   'admin.addons.type.global': 'Global',
+  'admin.addons.type.integration': 'Integration',
   'admin.addons.tripHint': 'Verfügbar als Tab innerhalb jedes Trips',
   'admin.addons.globalHint': 'Verfügbar als eigenständiger Bereich in der Navigation',
+  'admin.addons.integrationHint': 'Backend-Dienste und API-Integrationen ohne eigene Seite',
   'admin.addons.toast.updated': 'Addon aktualisiert',
   'admin.addons.toast.error': 'Addon konnte nicht aktualisiert werden',
   'admin.addons.noAddons': 'Keine Addons verfügbar',
@@ -319,8 +524,37 @@ const de: Record<string, string> = {
   'admin.weather.requestsDesc': 'Kostenlos, kein API-Schlüssel erforderlich',
   'admin.weather.locationHint': 'Das Wetter wird anhand des ersten Ortes mit Koordinaten im jeweiligen Tag berechnet. Ist kein Ort am Tag eingeplant, wird ein beliebiger Ort aus der Ortsliste als Referenz verwendet.',
 
+  // MCP Tokens
+  'admin.tabs.mcpTokens': 'MCP-Tokens',
+  'admin.mcpTokens.title': 'MCP-Tokens',
+  'admin.mcpTokens.subtitle': 'API-Tokens aller Benutzer verwalten',
+  'admin.mcpTokens.owner': 'Besitzer',
+  'admin.mcpTokens.tokenName': 'Token-Name',
+  'admin.mcpTokens.created': 'Erstellt',
+  'admin.mcpTokens.lastUsed': 'Zuletzt verwendet',
+  'admin.mcpTokens.never': 'Nie',
+  'admin.mcpTokens.empty': 'Es wurden noch keine MCP-Tokens erstellt',
+  'admin.mcpTokens.deleteTitle': 'Token löschen',
+  'admin.mcpTokens.deleteMessage': 'Dieser Token wird sofort widerrufen. Der Benutzer verliert den MCP-Zugang über diesen Token.',
+  'admin.mcpTokens.deleteSuccess': 'Token gelöscht',
+  'admin.mcpTokens.deleteError': 'Token konnte nicht gelöscht werden',
+  'admin.mcpTokens.loadError': 'Tokens konnten nicht geladen werden',
+
   // GitHub
   'admin.tabs.github': 'GitHub',
+
+  'admin.audit.subtitle': 'Sicherheitsrelevante und administrative Ereignisse (Backups, Benutzer, MFA, Einstellungen).',
+  'admin.audit.empty': 'Noch keine Audit-Einträge.',
+  'admin.audit.refresh': 'Aktualisieren',
+  'admin.audit.loadMore': 'Mehr laden',
+  'admin.audit.showing': '{count} geladen · {total} gesamt',
+  'admin.audit.col.time': 'Zeit',
+  'admin.audit.col.user': 'Benutzer',
+  'admin.audit.col.action': 'Aktion',
+  'admin.audit.col.resource': 'Ressource',
+  'admin.audit.col.ip': 'IP',
+  'admin.audit.col.details': 'Details',
+
   'admin.github.title': 'Update-Verlauf',
   'admin.github.subtitle': 'Neueste Updates von {repo}',
   'admin.github.latest': 'Aktuell',
@@ -331,6 +565,7 @@ const de: Record<string, string> = {
   'admin.github.loading': 'Wird geladen...',
   'admin.github.error': 'Releases konnten nicht geladen werden',
   'admin.github.by': 'von',
+  'admin.github.support': 'Hilft mir, TREK weiterzuentwickeln',
 
   'admin.update.available': 'Update verfügbar',
   'admin.update.text': 'TREK {version} ist verfügbar. Du verwendest {current}.',
@@ -382,11 +617,23 @@ const de: Record<string, string> = {
   'vacay.remaining': 'Rest',
   'vacay.carriedOver': 'aus {year}',
   'vacay.blockWeekends': 'Wochenenden sperren',
-  'vacay.blockWeekendsHint': 'Verhindert Urlaubseinträge an Samstagen und Sonntagen',
+  'vacay.blockWeekendsHint': 'Verhindert Urlaubseinträge an Wochenendtagen',
+  'vacay.weekendDays': 'Wochenendtage',
+  'vacay.mon': 'Mo',
+  'vacay.tue': 'Di',
+  'vacay.wed': 'Mi',
+  'vacay.thu': 'Do',
+  'vacay.fri': 'Fr',
+  'vacay.sat': 'Sa',
+  'vacay.sun': 'So',
   'vacay.publicHolidays': 'Feiertage',
   'vacay.publicHolidaysHint': 'Feiertage im Kalender markieren',
   'vacay.selectCountry': 'Land wählen',
   'vacay.selectRegion': 'Region wählen (optional)',
+  'vacay.addCalendar': 'Kalender hinzufügen',
+  'vacay.calendarLabel': 'Bezeichnung (optional)',
+  'vacay.calendarColor': 'Farbe',
+  'vacay.noCalendars': 'Noch keine Feiertagskalender angelegt',
   'vacay.companyHolidays': 'Betriebsferien',
   'vacay.companyHolidaysHint': 'Erlaubt das Markieren von unternehmensweiten Feiertagen',
   'vacay.companyHolidaysNoDeduct': 'Betriebsferien werden nicht vom Urlaubskontingent abgezogen.',
@@ -431,6 +678,25 @@ const de: Record<string, string> = {
   'atlas.countries': 'Länder',
   'atlas.trips': 'Reisen',
   'atlas.places': 'Orte',
+  'atlas.unmark': 'Entfernen',
+  'atlas.confirmMark': 'Dieses Land als besucht markieren?',
+  'atlas.confirmUnmark': 'Dieses Land von der Liste entfernen?',
+  'atlas.markVisited': 'Als besucht markieren',
+  'atlas.markVisitedHint': 'Dieses Land zur besuchten Liste hinzufügen',
+  'atlas.addToBucket': 'Zur Bucket List',
+  'atlas.addPoi': 'Ort hinzufügen',
+  'atlas.searchCountry': 'Land suchen...',
+  'atlas.bucketNamePlaceholder': 'Name (Land, Stadt, Ort...)',
+  'atlas.month': 'Monat',
+  'atlas.year': 'Jahr',
+  'atlas.addToBucketHint': 'Als Wunschziel speichern',
+  'atlas.bucketWhen': 'Wann möchtest du dorthin reisen?',
+  'atlas.statsTab': 'Statistik',
+  'atlas.bucketTab': 'Bucket List',
+  'atlas.addBucket': 'Zur Bucket List hinzufügen',
+  'atlas.bucketNotesPlaceholder': 'Notizen (optional)',
+  'atlas.bucketEmpty': 'Deine Bucket List ist leer',
+  'atlas.bucketEmptyHint': 'Füge Orte hinzu, die du besuchen möchtest',
   'atlas.days': 'Tage',
   'atlas.visitedCountries': 'Besuchte Länder',
   'atlas.cities': 'Städte',
@@ -440,7 +706,6 @@ const de: Record<string, string> = {
   'atlas.nextTrip': 'Nächster Trip',
   'atlas.daysLeft': 'Tage',
   'atlas.streak': 'Streak',
-  'atlas.year': 'Jahr',
   'atlas.years': 'Jahre',
   'atlas.yearInRow': 'Jahr in Folge',
   'atlas.yearsInRow': 'Jahre in Folge',
@@ -470,6 +735,7 @@ const de: Record<string, string> = {
   'trip.tabs.budget': 'Budget',
   'trip.tabs.files': 'Dateien',
   'trip.loading': 'Reise wird geladen...',
+  'trip.loadingPhotos': 'Fotos der Orte werden geladen...',
   'trip.mobilePlan': 'Planung',
   'trip.mobilePlaces': 'Orte',
   'trip.toast.placeUpdated': 'Ort aktualisiert',
@@ -485,6 +751,12 @@ const de: Record<string, string> = {
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'Keine Orte für diesen Tag geplant',
+  'dayplan.cannotReorderTransport': 'Buchungen mit fester Uhrzeit können nicht verschoben werden',
+  'dayplan.confirmRemoveTimeTitle': 'Uhrzeit entfernen?',
+  'dayplan.confirmRemoveTimeBody': 'Dieser Ort hat eine feste Uhrzeit ({time}). Durch das Verschieben wird die Uhrzeit entfernt und der Ort kann frei sortiert werden.',
+  'dayplan.confirmRemoveTimeAction': 'Uhrzeit entfernen & verschieben',
+  'dayplan.cannotDropOnTimed': 'Orte können nicht zwischen zeitgebundene Einträge geschoben werden',
+  'dayplan.cannotBreakChronology': 'Die zeitliche Reihenfolge von Uhrzeiten und Buchungen darf nicht verletzt werden',
   'dayplan.addNote': 'Notiz hinzufügen',
   'dayplan.editNote': 'Notiz bearbeiten',
   'dayplan.noteAdd': 'Notiz hinzufügen',
@@ -510,11 +782,22 @@ const de: Record<string, string> = {
 
   // Places Sidebar
   'places.addPlace': 'Ort/Aktivität hinzufügen',
+  'places.importGpx': 'GPX',
+  'places.gpxImported': '{count} Orte aus GPX importiert',
+  'places.urlResolved': 'Ort aus URL importiert',
+  'places.gpxError': 'GPX-Import fehlgeschlagen',
+  'places.importGoogleList': 'Google Liste',
+  'places.googleListHint': 'Geteilten Google Maps Listen-Link einfügen, um alle Orte zu importieren.',
+  'places.googleListImported': '{count} Orte aus "{list}" importiert',
+  'places.googleListError': 'Google Maps Liste konnte nicht importiert werden',
+  'places.viewDetails': 'Details anzeigen',
   'places.assignToDay': 'Zu welchem Tag hinzufügen?',
   'places.all': 'Alle',
   'places.unplanned': 'Ungeplant',
   'places.search': 'Orte suchen...',
   'places.allCategories': 'Alle Kategorien',
+  'places.categoriesSelected': 'Kategorien',
+  'places.clearFilter': 'Filter zurücksetzen',
   'places.count': '{count} Orte',
   'places.countSingular': '1 Ort',
   'places.allPlanned': 'Alle Orte sind eingeplant',
@@ -563,6 +846,7 @@ const de: Record<string, string> = {
   'inspector.addRes': 'Reservierung',
   'inspector.editRes': 'Reservierung bearbeiten',
   'inspector.participants': 'Teilnehmer',
+  'inspector.trackStats': 'Streckendaten',
 
   // Reservations
   'reservations.title': 'Buchungen',
@@ -598,13 +882,13 @@ const de: Record<string, string> = {
   'reservations.meta.linkAccommodation': 'Unterkunft',
   'reservations.meta.pickAccommodation': 'Mit Unterkunft verknüpfen',
   'reservations.meta.noAccommodation': 'Keine',
-  'reservations.meta.hotelPlace': 'Hotel',
-  'reservations.meta.pickHotel': 'Hotel auswählen',
+  'reservations.meta.hotelPlace': 'Unterkunft',
+  'reservations.meta.pickHotel': 'Unterkunft auswählen',
   'reservations.meta.fromDay': 'Von',
   'reservations.meta.toDay': 'Bis',
   'reservations.meta.selectDay': 'Tag wählen',
   'reservations.type.flight': 'Flug',
-  'reservations.type.hotel': 'Hotel',
+  'reservations.type.hotel': 'Unterkunft',
   'reservations.type.restaurant': 'Restaurant',
   'reservations.type.train': 'Zug',
   'reservations.type.car': 'Mietwagen',
@@ -613,6 +897,8 @@ const de: Record<string, string> = {
   'reservations.type.tour': 'Tour',
   'reservations.type.other': 'Sonstiges',
   'reservations.confirm.delete': 'Möchtest du die Reservierung "{name}" wirklich löschen?',
+  'reservations.confirm.deleteTitle': 'Buchung löschen?',
+  'reservations.confirm.deleteBody': '"{name}" wird unwiderruflich gelöscht.',
   'reservations.toast.updated': 'Reservierung aktualisiert',
   'reservations.toast.removed': 'Reservierung gelöscht',
   'reservations.toast.saveError': 'Fehler beim Speichern',
@@ -636,12 +922,14 @@ const de: Record<string, string> = {
   'reservations.pendingSave': 'wird gespeichert…',
   'reservations.uploading': 'Wird hochgeladen...',
   'reservations.attachFile': 'Datei anhängen',
+  'reservations.linkExisting': 'Vorhandene verknüpfen',
   'reservations.linkAssignment': 'Mit Tagesplanung verknüpfen',
   'reservations.pickAssignment': 'Zuordnung aus dem Plan wählen...',
   'reservations.noAssignment': 'Keine Verknüpfung',
 
   // Budget
   'budget.title': 'Budget',
+  'budget.exportCsv': 'CSV exportieren',
   'budget.emptyTitle': 'Noch kein Budget erstellt',
   'budget.emptyText': 'Erstelle Kategorien und Einträge, um dein Reisebudget zu planen',
   'budget.emptyPlaceholder': 'Kategoriename eingeben...',
@@ -656,6 +944,7 @@ const de: Record<string, string> = {
   'budget.table.perDay': 'Pro Tag',
   'budget.table.perPersonDay': 'P. p / Tag',
   'budget.table.note': 'Notiz',
+  'budget.table.date': 'Datum',
   'budget.newEntry': 'Neuer Eintrag',
   'budget.defaultEntry': 'Neuer Eintrag',
   'budget.defaultCategory': 'Neue Kategorie',
@@ -669,6 +958,9 @@ const de: Record<string, string> = {
   'budget.paid': 'Bezahlt',
   'budget.open': 'Offen',
   'budget.noMembers': 'Keine Teilnehmer zugewiesen',
+  'budget.settlement': 'Ausgleich',
+  'budget.settlementInfo': 'Klicke auf ein Mitglied-Bild bei einem Eintrag, um es grün zu markieren — das bedeutet, diese Person hat bezahlt. Der Ausgleich zeigt dann, wer wem wie viel schuldet.',
+  'budget.netBalances': 'Netto-Salden',
 
   // Files
   'files.title': 'Dateien',
@@ -722,6 +1014,15 @@ const de: Record<string, string> = {
   // Packing
   'packing.title': 'Packliste',
   'packing.empty': 'Packliste ist leer',
+  'packing.import': 'Importieren',
+  'packing.importTitle': 'Packliste importieren',
+  'packing.importHint': 'Ein Eintrag pro Zeile. Format: Kategorie, Name, Gewicht in g (optional), Tasche (optional), checked/unchecked (optional)',
+  'packing.importPlaceholder': 'Hygiene, Zahnbürste\nKleidung, T-Shirts, 200\nDokumente, Reisepass, , Handgepäck\nElektronik, Ladekabel, 50, Koffer, checked',
+  'packing.importCsv': 'CSV/TXT laden',
+  'packing.importAction': '{count} importieren',
+  'packing.importSuccess': '{count} Einträge importiert',
+  'packing.importError': 'Import fehlgeschlagen',
+  'packing.importEmpty': 'Keine Einträge zum Importieren',
   'packing.progress': '{packed} von {total} gepackt ({percent}%)',
   'packing.clearChecked': '{count} abgehakte entfernen',
   'packing.clearCheckedShort': '{count} entfernen',
@@ -741,6 +1042,21 @@ const de: Record<string, string> = {
   'packing.menuCheckAll': 'Alle abhaken',
   'packing.menuUncheckAll': 'Alle Haken entfernen',
   'packing.menuDeleteCat': 'Kategorie löschen',
+  'packing.assignUser': 'Benutzer zuweisen',
+  'packing.noMembers': 'Keine Mitglieder',
+  'packing.addItem': 'Eintrag hinzufügen',
+  'packing.addItemPlaceholder': 'Artikelname...',
+  'packing.addCategory': 'Kategorie hinzufügen',
+  'packing.newCategoryPlaceholder': 'Kategoriename (z.B. Kleidung)',
+  'packing.applyTemplate': 'Vorlage anwenden',
+  'packing.template': 'Vorlage',
+  'packing.templateApplied': '{count} Einträge aus Vorlage hinzugefügt',
+  'packing.templateError': 'Vorlage konnte nicht angewendet werden',
+  'packing.bags': 'Gepäck',
+  'packing.noBag': 'Nicht zugeordnet',
+  'packing.totalWeight': 'Gesamtgewicht',
+  'packing.bagName': 'Name...',
+  'packing.addBag': 'Gepäck hinzufügen',
   'packing.changeCategory': 'Kategorie ändern',
   'packing.confirm.clearChecked': 'Möchtest du {count} abgehakte Gegenstände wirklich entfernen?',
   'packing.confirm.deleteCat': 'Möchtest du die Kategorie "{name}" mit {count} Gegenständen wirklich löschen?',
@@ -858,7 +1174,27 @@ const de: Record<string, string> = {
   'backup.auto.enable': 'Auto-Backup aktivieren',
   'backup.auto.enableHint': 'Backups werden automatisch nach dem gewählten Zeitplan erstellt',
   'backup.auto.interval': 'Intervall',
+  'backup.auto.hour': 'Ausführung um',
+  'backup.auto.hourHint': 'Lokale Serverzeit ({format}-Format)',
+  'backup.auto.dayOfWeek': 'Wochentag',
+  'backup.auto.dayOfMonth': 'Tag des Monats',
+  'backup.auto.dayOfMonthHint': 'Auf 1–28 beschränkt, um mit allen Monaten kompatibel zu sein',
+  'backup.auto.scheduleSummary': 'Zeitplan',
+  'backup.auto.summaryDaily': 'Täglich um {hour}:00',
+  'backup.auto.summaryWeekly': 'Jeden {day} um {hour}:00',
+  'backup.auto.summaryMonthly': 'Am {day}. jedes Monats um {hour}:00',
+  'backup.auto.envLocked': 'Docker',
+  'backup.auto.envLockedHint': 'Auto-Backup wird über Docker-Umgebungsvariablen konfiguriert. Ändern Sie Ihre docker-compose.yml und starten Sie den Container neu.',
+  'backup.auto.copyEnv': 'Docker-Umgebungsvariablen kopieren',
+  'backup.auto.envCopied': 'Docker-Umgebungsvariablen in die Zwischenablage kopiert',
   'backup.auto.keepLabel': 'Alte Backups löschen nach',
+  'backup.dow.sunday': 'So',
+  'backup.dow.monday': 'Mo',
+  'backup.dow.tuesday': 'Di',
+  'backup.dow.wednesday': 'Mi',
+  'backup.dow.thursday': 'Do',
+  'backup.dow.friday': 'Fr',
+  'backup.dow.saturday': 'Sa',
   'backup.interval.hourly': 'Stündlich',
   'backup.interval.daily': 'Täglich',
   'backup.interval.weekly': 'Wöchentlich',
@@ -985,6 +1321,52 @@ const de: Record<string, string> = {
   'day.editAccommodation': 'Unterkunft bearbeiten',
   'day.reservations': 'Reservierungen',
 
+  // Photos / Immich
+  'memories.title': 'Fotos',
+  'memories.notConnected': 'Immich nicht verbunden',
+  'memories.notConnectedHint': 'Verbinde deine Immich-Instanz in den Einstellungen, um deine Reisefotos hier zu sehen.',
+  'memories.noDates': 'Füge Daten zu deiner Reise hinzu, um Fotos zu laden.',
+  'memories.noPhotos': 'Keine Fotos gefunden',
+  'memories.noPhotosHint': 'Keine Fotos in Immich für den Zeitraum dieser Reise gefunden.',
+  'memories.photosFound': 'Fotos',
+  'memories.fromOthers': 'von anderen',
+  'memories.sharePhotos': 'Fotos teilen',
+  'memories.sharing': 'Wird geteilt',
+  'memories.reviewTitle': 'Deine Fotos prüfen',
+  'memories.reviewHint': 'Klicke auf Fotos, um sie vom Teilen auszuschließen.',
+  'memories.shareCount': '{count} Fotos teilen',
+  'memories.immichUrl': 'Immich Server URL',
+  'memories.immichApiKey': 'API-Schlüssel',
+  'memories.testConnection': 'Verbindung testen',
+  'memories.testFirst': 'Verbindung zuerst testen',
+  'memories.connected': 'Verbunden',
+  'memories.disconnected': 'Nicht verbunden',
+  'memories.connectionSuccess': 'Verbindung zu Immich hergestellt',
+  'memories.connectionError': 'Verbindung zu Immich fehlgeschlagen',
+  'memories.saved': 'Immich-Einstellungen gespeichert',
+  'memories.addPhotos': 'Fotos hinzufügen',
+  'memories.linkAlbum': 'Album verknüpfen',
+  'memories.selectAlbum': 'Immich-Album auswählen',
+  'memories.noAlbums': 'Keine Alben gefunden',
+  'memories.syncAlbum': 'Album synchronisieren',
+  'memories.unlinkAlbum': 'Album trennen',
+  'memories.photos': 'Fotos',
+  'memories.selectPhotos': 'Fotos aus Immich auswählen',
+  'memories.selectHint': 'Tippe auf Fotos um sie auszuwählen.',
+  'memories.selected': 'ausgewählt',
+  'memories.addSelected': '{count} Fotos hinzufügen',
+  'memories.alreadyAdded': 'Hinzugefügt',
+  'memories.private': 'Privat',
+  'memories.stopSharing': 'Nicht mehr teilen',
+  'memories.oldest': 'Älteste zuerst',
+  'memories.newest': 'Neueste zuerst',
+  'memories.allLocations': 'Alle Orte',
+  'memories.tripDates': 'Trip-Zeitraum',
+  'memories.allPhotos': 'Alle Fotos',
+  'memories.confirmShareTitle': 'Mit Reisebegleitern teilen?',
+  'memories.confirmShareHint': '{count} Fotos werden für alle Mitglieder dieses Trips sichtbar. Du kannst einzelne Fotos nachträglich auf privat setzen.',
+  'memories.confirmShareButton': 'Fotos teilen',
+
   // Collab Addon
   'collab.tabs.chat': 'Chat',
   'collab.tabs.notes': 'Notizen',
@@ -1003,6 +1385,7 @@ const de: Record<string, string> = {
   'collab.chat.today': 'Heute',
   'collab.chat.yesterday': 'Gestern',
   'collab.chat.deletedMessage': 'hat eine Nachricht gelöscht',
+  'collab.chat.reply': 'Antworten',
   'collab.chat.loadMore': 'Ältere Nachrichten laden',
   'collab.chat.justNow': 'gerade eben',
   'collab.chat.minutesAgo': 'vor {n} Min.',
@@ -1053,6 +1436,55 @@ const de: Record<string, string> = {
   'collab.polls.options': 'Optionen',
   'collab.polls.delete': 'Löschen',
   'collab.polls.closedSection': 'Geschlossen',
+
+  // Permissions
+  'admin.tabs.permissions': 'Berechtigungen',
+  'perm.title': 'Berechtigungseinstellungen',
+  'perm.subtitle': 'Steuern Sie, wer Aktionen in der Anwendung ausführen kann',
+  'perm.saved': 'Berechtigungseinstellungen gespeichert',
+  'perm.resetDefaults': 'Auf Standard zurücksetzen',
+  'perm.customized': 'angepasst',
+  'perm.level.admin': 'Nur Administrator',
+  'perm.level.tripOwner': 'Reise-Eigentümer',
+  'perm.level.tripMember': 'Reise-Mitglieder',
+  'perm.level.everybody': 'Alle',
+  'perm.cat.trip': 'Reiseverwaltung',
+  'perm.cat.members': 'Mitgliederverwaltung',
+  'perm.cat.files': 'Dateien',
+  'perm.cat.content': 'Inhalte & Zeitplan',
+  'perm.cat.extras': 'Budget, Packlisten & Zusammenarbeit',
+  'perm.action.trip_create': 'Reisen erstellen',
+  'perm.action.trip_edit': 'Reisedetails bearbeiten',
+  'perm.action.trip_delete': 'Reisen löschen',
+  'perm.action.trip_archive': 'Reisen archivieren / dearchivieren',
+  'perm.action.trip_cover_upload': 'Titelbild hochladen',
+  'perm.action.member_manage': 'Mitglieder hinzufügen / entfernen',
+  'perm.action.file_upload': 'Dateien hochladen',
+  'perm.action.file_edit': 'Datei-Metadaten bearbeiten',
+  'perm.action.file_delete': 'Dateien löschen',
+  'perm.action.place_edit': 'Orte hinzufügen / bearbeiten / löschen',
+  'perm.action.day_edit': 'Tage, Notizen & Zuweisungen bearbeiten',
+  'perm.action.reservation_edit': 'Reservierungen verwalten',
+  'perm.action.budget_edit': 'Budget verwalten',
+  'perm.action.packing_edit': 'Packlisten verwalten',
+  'perm.action.collab_edit': 'Zusammenarbeit (Notizen, Umfragen, Chat)',
+  'perm.action.share_manage': 'Freigabelinks verwalten',
+  'perm.actionHint.trip_create': 'Wer kann neue Reisen erstellen',
+  'perm.actionHint.trip_edit': 'Wer kann Reisename, Daten, Beschreibung und Währung ändern',
+  'perm.actionHint.trip_delete': 'Wer kann eine Reise dauerhaft löschen',
+  'perm.actionHint.trip_archive': 'Wer kann eine Reise archivieren oder dearchivieren',
+  'perm.actionHint.trip_cover_upload': 'Wer kann das Titelbild hochladen oder ändern',
+  'perm.actionHint.member_manage': 'Wer kann Reise-Mitglieder einladen oder entfernen',
+  'perm.actionHint.file_upload': 'Wer kann Dateien zu einer Reise hochladen',
+  'perm.actionHint.file_edit': 'Wer kann Dateibeschreibungen und Links bearbeiten',
+  'perm.actionHint.file_delete': 'Wer kann Dateien in den Papierkorb verschieben oder dauerhaft löschen',
+  'perm.actionHint.place_edit': 'Wer kann Orte hinzufügen, bearbeiten oder löschen',
+  'perm.actionHint.day_edit': 'Wer kann Tage, Tagesnotizen und Ort-Zuweisungen bearbeiten',
+  'perm.actionHint.reservation_edit': 'Wer kann Reservierungen erstellen, bearbeiten oder löschen',
+  'perm.actionHint.budget_edit': 'Wer kann Budgetposten erstellen, bearbeiten oder löschen',
+  'perm.actionHint.packing_edit': 'Wer kann Packstücke und Taschen verwalten',
+  'perm.actionHint.collab_edit': 'Wer kann Notizen, Umfragen erstellen und Nachrichten senden',
+  'perm.actionHint.share_manage': 'Wer kann öffentliche Freigabelinks erstellen oder löschen',
 }
 
 export default de

client/src/i18n/translations/en.ts

@@ -1,4 +1,4 @@
-const en: Record<string, string> = {
+const en: Record<string, string | { name: string; category: string }[]> = {
   // Common
   'common.save': 'Save',
   'common.cancel': 'Cancel',
@@ -6,6 +6,7 @@ const en: Record<string, string> = {
   'common.edit': 'Edit',
   'common.add': 'Add',
   'common.loading': 'Loading...',
+  'common.import': 'Import',
   'common.error': 'Error',
   'common.back': 'Back',
   'common.all': 'All',
@@ -25,6 +26,14 @@ const en: Record<string, string> = {
   'common.email': 'Email',
   'common.password': 'Password',
   'common.saving': 'Saving...',
+  'common.saved': 'Saved',
+  'trips.reminder': 'Reminder',
+  'trips.reminderNone': 'None',
+  'trips.reminderDay': 'day',
+  'trips.reminderDays': 'days',
+  'trips.reminderCustom': 'Custom',
+  'trips.reminderDaysBefore': 'days before departure',
+  'trips.reminderDisabledHint': 'Trip reminders are disabled. Enable them in Admin > Settings > Notifications.',
   'common.update': 'Update',
   'common.change': 'Change',
   'common.uploading': 'Uploading…',
@@ -51,9 +60,18 @@ const en: Record<string, string> = {
   'dashboard.subtitle.activeMany': '{count} active trips',
   'dashboard.subtitle.archivedSuffix': ' · {count} archived',
   'dashboard.newTrip': 'New Trip',
+  'dashboard.gridView': 'Grid view',
+  'dashboard.listView': 'List view',
   'dashboard.currency': 'Currency',
   'dashboard.timezone': 'Timezones',
   'dashboard.localTime': 'Local',
+  'dashboard.timezoneCustomTitle': 'Custom Timezone',
+  'dashboard.timezoneCustomLabelPlaceholder': 'Label (optional)',
+  'dashboard.timezoneCustomTzPlaceholder': 'e.g. America/New_York',
+  'dashboard.timezoneCustomAdd': 'Add',
+  'dashboard.timezoneCustomErrorEmpty': 'Enter a timezone identifier',
+  'dashboard.timezoneCustomErrorInvalid': 'Invalid timezone. Use format like Europe/Berlin',
+  'dashboard.timezoneCustomErrorDuplicate': 'Already added',
   'dashboard.emptyTitle': 'No trips yet',
   'dashboard.emptyText': 'Create your first trip and start planning!',
   'dashboard.emptyButton': 'Create First Trip',
@@ -92,7 +110,9 @@ const en: Record<string, string> = {
   'dashboard.endDate': 'End Date',
   'dashboard.noDateHint': 'No date set — 7 default days will be created. You can change this anytime.',
   'dashboard.coverImage': 'Cover Image',
-  'dashboard.addCoverImage': 'Add cover image',
+  'dashboard.addCoverImage': 'Add cover image (or drag & drop)',
+  'dashboard.addMembers': 'Travel buddies',
+  'dashboard.addMember': 'Add member',
   'dashboard.coverSaved': 'Cover image saved',
   'dashboard.coverUploadError': 'Failed to upload',
   'dashboard.coverRemoveError': 'Failed to remove',
@@ -128,8 +148,94 @@ const en: Record<string, string> = {
   'settings.temperature': 'Temperature Unit',
   'settings.timeFormat': 'Time Format',
   'settings.routeCalculation': 'Route Calculation',
+  'settings.blurBookingCodes': 'Blur Booking Codes',
+  'settings.notifications': 'Notifications',
+  'settings.notifyTripInvite': 'Trip invitations',
+  'settings.notifyBookingChange': 'Booking changes',
+  'settings.notifyTripReminder': 'Trip reminders',
+  'settings.notifyVacayInvite': 'Vacay fusion invitations',
+  'settings.notifyPhotosShared': 'Shared photos (Immich)',
+  'settings.notifyCollabMessage': 'Chat messages (Collab)',
+  'settings.notifyPackingTagged': 'Packing list: assignments',
+  'settings.notifyWebhook': 'Webhook notifications',
+  'admin.notifications.title': 'Notifications',
+  'admin.notifications.hint': 'Choose one notification channel. Only one can be active at a time.',
+  'admin.notifications.none': 'Disabled',
+  'admin.notifications.email': 'Email (SMTP)',
+  'admin.notifications.webhook': 'Webhook',
+  'admin.notifications.events': 'Notification Events',
+  'admin.notifications.eventsHint': 'Choose which events trigger notifications for all users.',
+  'admin.notifications.configureFirst': 'Configure the SMTP or webhook settings below first, then enable events.',
+  'admin.notifications.save': 'Save notification settings',
+  'admin.notifications.saved': 'Notification settings saved',
+  'admin.notifications.testWebhook': 'Send test webhook',
+  'admin.notifications.testWebhookSuccess': 'Test webhook sent successfully',
+  'admin.notifications.testWebhookFailed': 'Test webhook failed',
+  'admin.smtp.title': 'Email & Notifications',
+  'admin.smtp.hint': 'SMTP configuration for sending email notifications.',
+  'admin.smtp.testButton': 'Send test email',
+  'admin.webhook.hint': 'Send notifications to an external webhook (Discord, Slack, etc.).',
+  'admin.smtp.testSuccess': 'Test email sent successfully',
+  'admin.smtp.testFailed': 'Test email failed',
+  'settings.notificationsDisabled': 'Notifications are not configured. Ask an admin to enable email or webhook notifications.',
+  'settings.notificationsActive': 'Active channel',
+  'settings.notificationsManagedByAdmin': 'Notification events are configured by your administrator.',
+  'dayplan.icsTooltip': 'Export calendar (ICS)',
+  'share.linkTitle': 'Public Link',
+  'share.linkHint': 'Create a link anyone can use to view this trip without logging in. Read-only — no editing possible.',
+  'share.createLink': 'Create link',
+  'share.deleteLink': 'Delete link',
+  'share.createError': 'Could not create link',
+  'common.copy': 'Copy',
+  'common.copied': 'Copied',
+  'share.permMap': 'Map & Plan',
+  'share.permBookings': 'Bookings',
+  'share.permPacking': 'Packing',
+  'shared.expired': 'Link expired or invalid',
+  'shared.expiredHint': 'This shared trip link is no longer active.',
+  'shared.readOnly': 'Read-only shared view',
+  'shared.tabPlan': 'Plan',
+  'shared.tabBookings': 'Bookings',
+  'shared.tabPacking': 'Packing',
+  'shared.tabBudget': 'Budget',
+  'shared.tabChat': 'Chat',
+  'shared.days': 'days',
+  'shared.places': 'places',
+  'shared.other': 'Other',
+  'shared.totalBudget': 'Total Budget',
+  'shared.messages': 'messages',
+  'shared.sharedVia': 'Shared via',
+  'shared.confirmed': 'Confirmed',
+  'shared.pending': 'Pending',
+  'share.permBudget': 'Budget',
+  'share.permCollab': 'Chat',
   'settings.on': 'On',
   'settings.off': 'Off',
+  'settings.mcp.title': 'MCP Configuration',
+  'settings.mcp.endpoint': 'MCP Endpoint',
+  'settings.mcp.clientConfig': 'Client Configuration',
+  'settings.mcp.clientConfigHint': 'Replace <your_token> with an API token from the list below. The path to npx may need to be adjusted for your system (e.g. C:\\PROGRA~1\\nodejs\\npx.cmd on Windows).',
+  'settings.mcp.copy': 'Copy',
+  'settings.mcp.copied': 'Copied!',
+  'settings.mcp.apiTokens': 'API Tokens',
+  'settings.mcp.createToken': 'Create New Token',
+  'settings.mcp.noTokens': 'No tokens yet. Create one to connect MCP clients.',
+  'settings.mcp.tokenCreatedAt': 'Created',
+  'settings.mcp.tokenUsedAt': 'Used',
+  'settings.mcp.deleteTokenTitle': 'Delete Token',
+  'settings.mcp.deleteTokenMessage': 'This token will stop working immediately. Any MCP client using it will lose access.',
+  'settings.mcp.modal.createTitle': 'Create API Token',
+  'settings.mcp.modal.tokenName': 'Token Name',
+  'settings.mcp.modal.tokenNamePlaceholder': 'e.g. Claude Desktop, Work laptop',
+  'settings.mcp.modal.creating': 'Creating…',
+  'settings.mcp.modal.create': 'Create Token',
+  'settings.mcp.modal.createdTitle': 'Token Created',
+  'settings.mcp.modal.createdWarning': 'This token will only be shown once. Copy and store it now — it cannot be recovered.',
+  'settings.mcp.modal.done': 'Done',
+  'settings.mcp.toast.created': 'Token created',
+  'settings.mcp.toast.createError': 'Failed to create token',
+  'settings.mcp.toast.deleted': 'Token deleted',
+  'settings.mcp.toast.deleteError': 'Failed to delete token',
   'settings.account': 'Account',
   'settings.username': 'Username',
   'settings.email': 'Email',
@@ -145,8 +251,9 @@ const en: Record<string, string> = {
   'settings.passwordRequired': 'Please enter current and new password',
   'settings.passwordTooShort': 'Password must be at least 8 characters',
   'settings.passwordMismatch': 'Passwords do not match',
-  'settings.passwordWeak': 'Password must contain uppercase, lowercase, and a number',
+  'settings.passwordWeak': 'Password must contain uppercase, lowercase, a number, and a special character',
   'settings.passwordChanged': 'Password changed successfully',
+  'settings.mustChangePassword': 'You must change your password before you can continue. Please set a new password below.',
   'settings.deleteAccount': 'Delete account',
   'settings.deleteAccountTitle': 'Delete your account?',
   'settings.deleteAccountWarning': 'Your account and all your trips, places, and files will be permanently deleted. This action cannot be undone.',
@@ -164,6 +271,30 @@ const en: Record<string, string> = {
   'settings.avatarUploaded': 'Profile picture updated',
   'settings.avatarRemoved': 'Profile picture removed',
   'settings.avatarError': 'Upload failed',
+  'settings.mfa.title': 'Two-factor authentication (2FA)',
+  'settings.mfa.description': 'Adds a second step when you sign in with email and password. Use an authenticator app (Google Authenticator, Authy, etc.).',
+  'settings.mfa.requiredByPolicy': 'Your administrator requires two-factor authentication. Set up an authenticator app below before continuing.',
+  'settings.mfa.backupTitle': 'Backup codes',
+  'settings.mfa.backupDescription': 'Use these one-time backup codes if you lose access to your authenticator app.',
+  'settings.mfa.backupWarning': 'Save these codes now. Each code can only be used once.',
+  'settings.mfa.backupCopy': 'Copy codes',
+  'settings.mfa.backupDownload': 'Download TXT',
+  'settings.mfa.backupPrint': 'Print / PDF',
+  'settings.mfa.backupCopied': 'Backup codes copied',
+  'settings.mfa.enabled': '2FA is enabled on your account.',
+  'settings.mfa.disabled': '2FA is not enabled.',
+  'settings.mfa.setup': 'Set up authenticator',
+  'settings.mfa.scanQr': 'Scan this QR code with your app, or enter the secret manually.',
+  'settings.mfa.secretLabel': 'Secret key (manual entry)',
+  'settings.mfa.codePlaceholder': '6-digit code',
+  'settings.mfa.enable': 'Enable 2FA',
+  'settings.mfa.cancelSetup': 'Cancel',
+  'settings.mfa.disableTitle': 'Disable 2FA',
+  'settings.mfa.disableHint': 'Enter your account password and a current code from your authenticator.',
+  'settings.mfa.disable': 'Disable 2FA',
+  'settings.mfa.toastEnabled': 'Two-factor authentication enabled',
+  'settings.mfa.toastDisabled': 'Two-factor authentication disabled',
+  'settings.mfa.demoBlocked': 'Not available in demo mode',
 
   // Login
   'login.error': 'Login failed. Please check your credentials.',
@@ -192,6 +323,8 @@ const en: Record<string, string> = {
   'login.signIn': 'Sign In',
   'login.createAdmin': 'Create Admin Account',
   'login.createAdminHint': 'Set up the first admin account for TREK.',
+  'login.setNewPassword': 'Set New Password',
+  'login.setNewPasswordHint': 'You must change your password before continuing.',
   'login.createAccount': 'Create Account',
   'login.createAccountHint': 'Register a new account.',
   'login.creating': 'Creating…',
@@ -206,11 +339,19 @@ const en: Record<string, string> = {
   'login.oidc.invalidState': 'Invalid session. Please try again.',
   'login.demoFailed': 'Demo login failed',
   'login.oidcSignIn': 'Sign in with {name}',
+  'login.oidcOnly': 'Password authentication is disabled. Please sign in using your SSO provider.',
   'login.demoHint': 'Try the demo — no registration needed',
+  'login.mfaTitle': 'Two-factor authentication',
+  'login.mfaSubtitle': 'Enter the 6-digit code from your authenticator app.',
+  'login.mfaCodeLabel': 'Verification code',
+  'login.mfaCodeRequired': 'Enter the code from your authenticator app.',
+  'login.mfaHint': 'Open Google Authenticator, Authy, or another TOTP app.',
+  'login.mfaBack': '← Back to sign in',
+  'login.mfaVerify': 'Verify',
 
   // Register
   'register.passwordMismatch': 'Passwords do not match',
-  'register.passwordTooShort': 'Password must be at least 6 characters',
+  'register.passwordTooShort': 'Password must be at least 8 characters',
   'register.failed': 'Registration failed',
   'register.getStarted': 'Get Started',
   'register.subtitle': 'Create an account and start planning your dream trips.',
@@ -236,6 +377,7 @@ const en: Record<string, string> = {
   'admin.tabs.users': 'Users',
   'admin.tabs.categories': 'Categories',
   'admin.tabs.backup': 'Backup',
+  'admin.tabs.audit': 'Audit log',
   'admin.stats.users': 'Users',
   'admin.stats.trips': 'Trips',
   'admin.stats.places': 'Places',
@@ -264,9 +406,29 @@ const en: Record<string, string> = {
   'admin.toast.createError': 'Failed to create user',
   'admin.toast.fieldsRequired': 'Username, email and password are required',
   'admin.createUser': 'Create User',
+  'admin.invite.title': 'Invite Links',
+  'admin.invite.subtitle': 'Create one-time registration links',
+  'admin.invite.create': 'Create Link',
+  'admin.invite.createAndCopy': 'Create & Copy',
+  'admin.invite.empty': 'No invite links created yet',
+  'admin.invite.maxUses': 'Max. Uses',
+  'admin.invite.expiry': 'Expires after',
+  'admin.invite.uses': 'used',
+  'admin.invite.expiresAt': 'expires',
+  'admin.invite.createdBy': 'by',
+  'admin.invite.active': 'Active',
+  'admin.invite.expired': 'Expired',
+  'admin.invite.usedUp': 'Used up',
+  'admin.invite.copied': 'Invite link copied to clipboard',
+  'admin.invite.copyLink': 'Copy link',
+  'admin.invite.deleted': 'Invite link deleted',
+  'admin.invite.createError': 'Failed to create invite link',
+  'admin.invite.deleteError': 'Failed to delete invite link',
   'admin.tabs.settings': 'Settings',
   'admin.allowRegistration': 'Allow Registration',
   'admin.allowRegistrationHint': 'New users can register themselves',
+  'admin.requireMfa': 'Require two-factor authentication (2FA)',
+  'admin.requireMfaHint': 'Users without 2FA must complete setup in Settings before using the app.',
   'admin.apiKeys': 'API Keys',
   'admin.apiKeysHint': 'Optional. Enables extended place data like photos and weather.',
   'admin.mapsKey': 'Google Maps API Key',
@@ -285,6 +447,8 @@ const en: Record<string, string> = {
   'admin.oidcIssuer': 'Issuer URL',
   'admin.oidcIssuerHint': 'The OpenID Connect Issuer URL of the provider. e.g. https://accounts.google.com',
   'admin.oidcSaved': 'OIDC configuration saved',
+  'admin.oidcOnlyMode': 'Disable password authentication',
+  'admin.oidcOnlyModeHint': 'When enabled, only SSO login is permitted. Password-based login and registration are blocked.',
 
   // File Types
   'admin.fileTypes': 'Allowed File Types',
@@ -292,18 +456,59 @@ const en: Record<string, string> = {
   'admin.fileTypesFormat': 'Comma-separated extensions (e.g. jpg,png,pdf,doc). Use * to allow all types.',
   'admin.fileTypesSaved': 'File type settings saved',
 
+  // Packing Templates & Bag Tracking
+  'admin.bagTracking.title': 'Bag Tracking',
+  'admin.bagTracking.subtitle': 'Enable weight and bag assignment for packing items',
+  'admin.tabs.config': 'Configuration',
+  'admin.tabs.templates': 'Packing Templates',
+  'admin.packingTemplates.title': 'Packing Templates',
+  'admin.packingTemplates.subtitle': 'Create reusable packing lists for your trips',
+  'admin.packingTemplates.create': 'New Template',
+  'admin.packingTemplates.namePlaceholder': 'Template name (e.g. Beach Holiday)',
+  'admin.packingTemplates.empty': 'No templates created yet',
+  'admin.packingTemplates.items': 'items',
+  'admin.packingTemplates.categories': 'categories',
+  'admin.packingTemplates.itemName': 'Item name',
+  'admin.packingTemplates.itemCategory': 'Category',
+  'admin.packingTemplates.categoryName': 'Category name (e.g. Clothing)',
+  'admin.packingTemplates.addCategory': 'Add category',
+  'admin.packingTemplates.created': 'Template created',
+  'admin.packingTemplates.deleted': 'Template deleted',
+  'admin.packingTemplates.loadError': 'Failed to load templates',
+  'admin.packingTemplates.createError': 'Failed to create template',
+  'admin.packingTemplates.deleteError': 'Failed to delete template',
+  'admin.packingTemplates.saveError': 'Failed to save',
+
   // Addons
   'admin.tabs.addons': 'Addons',
   'admin.addons.title': 'Addons',
   'admin.addons.subtitle': 'Enable or disable features to customize your TREK experience.',
+  'admin.addons.catalog.packing.name': 'Packing',
+  'admin.addons.catalog.packing.description': 'Checklists to prepare your luggage for each trip',
+  'admin.addons.catalog.budget.name': 'Budget',
+  'admin.addons.catalog.budget.description': 'Track expenses and plan your trip budget',
+  'admin.addons.catalog.documents.name': 'Documents',
+  'admin.addons.catalog.documents.description': 'Store and manage travel documents',
+  'admin.addons.catalog.vacay.name': 'Vacay',
+  'admin.addons.catalog.vacay.description': 'Personal vacation planner with calendar view',
+  'admin.addons.catalog.atlas.name': 'Atlas',
+  'admin.addons.catalog.atlas.description': 'World map with visited countries and travel stats',
+  'admin.addons.catalog.collab.name': 'Collab',
+  'admin.addons.catalog.collab.description': 'Real-time notes, polls, and chat for trip planning',
+  'admin.addons.catalog.memories.name': 'Photos (Immich)',
+  'admin.addons.catalog.memories.description': 'Share trip photos via your Immich instance',
+  'admin.addons.catalog.mcp.name': 'MCP',
+  'admin.addons.catalog.mcp.description': 'Model Context Protocol for AI assistant integration',
   'admin.addons.subtitleBefore': 'Enable or disable features to customize your ',
   'admin.addons.subtitleAfter': ' experience.',
   'admin.addons.enabled': 'Enabled',
   'admin.addons.disabled': 'Disabled',
   'admin.addons.type.trip': 'Trip',
   'admin.addons.type.global': 'Global',
+  'admin.addons.type.integration': 'Integration',
   'admin.addons.tripHint': 'Available as a tab within each trip',
   'admin.addons.globalHint': 'Available as a standalone section in the main navigation',
+  'admin.addons.integrationHint': 'Backend services and API integrations with no dedicated page',
   'admin.addons.toast.updated': 'Addon updated',
   'admin.addons.toast.error': 'Failed to update addon',
   'admin.addons.noAddons': 'No addons available',
@@ -320,7 +525,33 @@ const en: Record<string, string> = {
   'admin.weather.locationHint': 'Weather is based on the first place with coordinates in each day. If no place is assigned to a day, any place from the place list is used as a reference.',
 
   // GitHub
+  'admin.tabs.mcpTokens': 'MCP Tokens',
+  'admin.mcpTokens.title': 'MCP Tokens',
+  'admin.mcpTokens.subtitle': 'Manage API tokens across all users',
+  'admin.mcpTokens.owner': 'Owner',
+  'admin.mcpTokens.tokenName': 'Token Name',
+  'admin.mcpTokens.created': 'Created',
+  'admin.mcpTokens.lastUsed': 'Last Used',
+  'admin.mcpTokens.never': 'Never',
+  'admin.mcpTokens.empty': 'No MCP tokens have been created yet',
+  'admin.mcpTokens.deleteTitle': 'Delete Token',
+  'admin.mcpTokens.deleteMessage': 'This will revoke the token immediately. The user will lose MCP access through this token.',
+  'admin.mcpTokens.deleteSuccess': 'Token deleted',
+  'admin.mcpTokens.deleteError': 'Failed to delete token',
+  'admin.mcpTokens.loadError': 'Failed to load tokens',
   'admin.tabs.github': 'GitHub',
+
+  'admin.audit.subtitle': 'Security-sensitive and administration events (backups, users, MFA, settings).',
+  'admin.audit.empty': 'No audit entries yet.',
+  'admin.audit.refresh': 'Refresh',
+  'admin.audit.loadMore': 'Load more',
+  'admin.audit.showing': '{count} loaded · {total} total',
+  'admin.audit.col.time': 'Time',
+  'admin.audit.col.user': 'User',
+  'admin.audit.col.action': 'Action',
+  'admin.audit.col.resource': 'Resource',
+  'admin.audit.col.ip': 'IP',
+  'admin.audit.col.details': 'Details',
   'admin.github.title': 'Release History',
   'admin.github.subtitle': 'Latest updates from {repo}',
   'admin.github.latest': 'Latest',
@@ -331,6 +562,7 @@ const en: Record<string, string> = {
   'admin.github.loading': 'Loading...',
   'admin.github.error': 'Failed to load releases',
   'admin.github.by': 'by',
+  'admin.github.support': 'Helps me keep building TREK',
 
   'admin.update.available': 'Update available',
   'admin.update.text': 'TREK {version} is available. You are running {current}.',
@@ -382,11 +614,23 @@ const en: Record<string, string> = {
   'vacay.remaining': 'Left',
   'vacay.carriedOver': 'from {year}',
   'vacay.blockWeekends': 'Block Weekends',
-  'vacay.blockWeekendsHint': 'Prevent vacation entries on Saturdays and Sundays',
+  'vacay.blockWeekendsHint': 'Prevent vacation entries on weekend days',
+  'vacay.weekendDays': 'Weekend days',
+  'vacay.mon': 'Mon',
+  'vacay.tue': 'Tue',
+  'vacay.wed': 'Wed',
+  'vacay.thu': 'Thu',
+  'vacay.fri': 'Fri',
+  'vacay.sat': 'Sat',
+  'vacay.sun': 'Sun',
   'vacay.publicHolidays': 'Public Holidays',
   'vacay.publicHolidaysHint': 'Mark public holidays in the calendar',
   'vacay.selectCountry': 'Select country',
   'vacay.selectRegion': 'Select region (optional)',
+  'vacay.addCalendar': 'Add calendar',
+  'vacay.calendarLabel': 'Label (optional)',
+  'vacay.calendarColor': 'Color',
+  'vacay.noCalendars': 'No holiday calendars added yet',
   'vacay.companyHolidays': 'Company Holidays',
   'vacay.companyHolidaysHint': 'Allow marking company-wide holiday days',
   'vacay.companyHolidaysNoDeduct': 'Company holidays do not count towards vacation days.',
@@ -431,6 +675,25 @@ const en: Record<string, string> = {
   'atlas.countries': 'Countries',
   'atlas.trips': 'Trips',
   'atlas.places': 'Places',
+  'atlas.unmark': 'Remove',
+  'atlas.confirmMark': 'Mark this country as visited?',
+  'atlas.confirmUnmark': 'Remove this country from your visited list?',
+  'atlas.markVisited': 'Mark as visited',
+  'atlas.markVisitedHint': 'Add this country to your visited list',
+  'atlas.addToBucket': 'Add to bucket list',
+  'atlas.addPoi': 'Add place',
+  'atlas.searchCountry': 'Search a country...',
+  'atlas.bucketNamePlaceholder': 'Name (country, city, place...)',
+  'atlas.month': 'Month',
+  'atlas.year': 'Year',
+  'atlas.addToBucketHint': 'Save as a place you want to visit',
+  'atlas.bucketWhen': 'When do you plan to visit?',
+  'atlas.statsTab': 'Stats',
+  'atlas.bucketTab': 'Bucket List',
+  'atlas.addBucket': 'Add to bucket list',
+  'atlas.bucketNotesPlaceholder': 'Notes (optional)',
+  'atlas.bucketEmpty': 'Your bucket list is empty',
+  'atlas.bucketEmptyHint': 'Add places you dream of visiting',
   'atlas.days': 'Days',
   'atlas.visitedCountries': 'Visited Countries',
   'atlas.cities': 'Cities',
@@ -440,7 +703,6 @@ const en: Record<string, string> = {
   'atlas.nextTrip': 'Next trip',
   'atlas.daysLeft': 'days left',
   'atlas.streak': 'Streak',
-  'atlas.year': 'year',
   'atlas.years': 'years',
   'atlas.yearInRow': 'year in a row',
   'atlas.yearsInRow': 'years in a row',
@@ -470,6 +732,7 @@ const en: Record<string, string> = {
   'trip.tabs.budget': 'Budget',
   'trip.tabs.files': 'Files',
   'trip.loading': 'Loading trip...',
+  'trip.loadingPhotos': 'Loading place photos...',
   'trip.mobilePlan': 'Plan',
   'trip.mobilePlaces': 'Places',
   'trip.toast.placeUpdated': 'Place updated',
@@ -485,6 +748,12 @@ const en: Record<string, string> = {
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'No places planned for this day',
+  'dayplan.cannotReorderTransport': 'Bookings with a fixed time cannot be reordered',
+  'dayplan.confirmRemoveTimeTitle': 'Remove time?',
+  'dayplan.confirmRemoveTimeBody': 'This place has a fixed time ({time}). Moving it will remove the time and allow free sorting.',
+  'dayplan.confirmRemoveTimeAction': 'Remove time & move',
+  'dayplan.cannotDropOnTimed': 'Items cannot be placed between time-bound entries',
+  'dayplan.cannotBreakChronology': 'This would break the chronological order of timed items and bookings',
   'dayplan.addNote': 'Add Note',
   'dayplan.editNote': 'Edit Note',
   'dayplan.noteAdd': 'Add Note',
@@ -510,11 +779,22 @@ const en: Record<string, string> = {
 
   // Places Sidebar
   'places.addPlace': 'Add Place/Activity',
+  'places.importGpx': 'GPX',
+  'places.gpxImported': '{count} places imported from GPX',
+  'places.urlResolved': 'Place imported from URL',
+  'places.gpxError': 'GPX import failed',
+  'places.importGoogleList': 'Google List',
+  'places.googleListHint': 'Paste a shared Google Maps list link to import all places.',
+  'places.googleListImported': '{count} places imported from "{list}"',
+  'places.googleListError': 'Failed to import Google Maps list',
+  'places.viewDetails': 'View Details',
   'places.assignToDay': 'Add to which day?',
   'places.all': 'All',
   'places.unplanned': 'Unplanned',
   'places.search': 'Search places...',
   'places.allCategories': 'All Categories',
+  'places.categoriesSelected': 'categories',
+  'places.clearFilter': 'Clear filter',
   'places.count': '{count} places',
   'places.countSingular': '1 place',
   'places.allPlanned': 'All places are planned',
@@ -563,6 +843,7 @@ const en: Record<string, string> = {
   'inspector.addRes': 'Reservation',
   'inspector.editRes': 'Edit Reservation',
   'inspector.participants': 'Participants',
+  'inspector.trackStats': 'Track Stats',
 
   // Reservations
   'reservations.title': 'Bookings',
@@ -598,13 +879,13 @@ const en: Record<string, string> = {
   'reservations.meta.linkAccommodation': 'Accommodation',
   'reservations.meta.pickAccommodation': 'Link to accommodation',
   'reservations.meta.noAccommodation': 'None',
-  'reservations.meta.hotelPlace': 'Hotel',
-  'reservations.meta.pickHotel': 'Select hotel',
+  'reservations.meta.hotelPlace': 'Accommodation',
+  'reservations.meta.pickHotel': 'Select accommodation',
   'reservations.meta.fromDay': 'From',
   'reservations.meta.toDay': 'To',
   'reservations.meta.selectDay': 'Select day',
   'reservations.type.flight': 'Flight',
-  'reservations.type.hotel': 'Hotel',
+  'reservations.type.hotel': 'Accommodation',
   'reservations.type.restaurant': 'Restaurant',
   'reservations.type.train': 'Train',
   'reservations.type.car': 'Rental Car',
@@ -613,6 +894,8 @@ const en: Record<string, string> = {
   'reservations.type.tour': 'Tour',
   'reservations.type.other': 'Other',
   'reservations.confirm.delete': 'Are you sure you want to delete the reservation "{name}"?',
+  'reservations.confirm.deleteTitle': 'Delete booking?',
+  'reservations.confirm.deleteBody': '"{name}" will be permanently deleted.',
   'reservations.toast.updated': 'Reservation updated',
   'reservations.toast.removed': 'Reservation deleted',
   'reservations.toast.fileUploaded': 'File uploaded',
@@ -632,6 +915,7 @@ const en: Record<string, string> = {
   'reservations.pendingSave': 'will be saved…',
   'reservations.uploading': 'Uploading...',
   'reservations.attachFile': 'Attach file',
+  'reservations.linkExisting': 'Link existing file',
   'reservations.toast.saveError': 'Failed to save',
   'reservations.toast.updateError': 'Failed to update',
   'reservations.toast.deleteError': 'Failed to delete',
@@ -642,6 +926,7 @@ const en: Record<string, string> = {
 
   // Budget
   'budget.title': 'Budget',
+  'budget.exportCsv': 'Export CSV',
   'budget.emptyTitle': 'No budget created yet',
   'budget.emptyText': 'Create categories and entries to plan your travel budget',
   'budget.emptyPlaceholder': 'Enter category name...',
@@ -656,6 +941,7 @@ const en: Record<string, string> = {
   'budget.table.perDay': 'Per Day',
   'budget.table.perPersonDay': 'P. p / Day',
   'budget.table.note': 'Note',
+  'budget.table.date': 'Date',
   'budget.newEntry': 'New Entry',
   'budget.defaultEntry': 'New Entry',
   'budget.defaultCategory': 'New Category',
@@ -669,6 +955,9 @@ const en: Record<string, string> = {
   'budget.paid': 'Paid',
   'budget.open': 'Open',
   'budget.noMembers': 'No members assigned',
+  'budget.settlement': 'Settlement',
+  'budget.settlementInfo': 'Click a member avatar on a budget item to mark them green — this means they paid. The settlement then shows who owes whom and how much.',
+  'budget.netBalances': 'Net Balances',
 
   // Files
   'files.title': 'Files',
@@ -722,6 +1011,15 @@ const en: Record<string, string> = {
   // Packing
   'packing.title': 'Packing List',
   'packing.empty': 'Packing list is empty',
+  'packing.import': 'Import',
+  'packing.importTitle': 'Import Packing List',
+  'packing.importHint': 'One item per line. Format: Category, Name, Weight in g (optional), Bag (optional), checked/unchecked (optional)',
+  'packing.importPlaceholder': 'Hygiene, Toothbrush\nClothing, T-Shirts, 200\nDocuments, Passport, , Carry-on\nElectronics, Charger, 50, Suitcase, checked',
+  'packing.importCsv': 'Load CSV/TXT',
+  'packing.importAction': 'Import {count}',
+  'packing.importSuccess': '{count} items imported',
+  'packing.importError': 'Import failed',
+  'packing.importEmpty': 'No items to import',
   'packing.progress': '{packed} of {total} packed ({percent}%)',
   'packing.clearChecked': 'Remove {count} checked',
   'packing.clearCheckedShort': 'Remove {count}',
@@ -741,6 +1039,21 @@ const en: Record<string, string> = {
   'packing.menuCheckAll': 'Check All',
   'packing.menuUncheckAll': 'Uncheck All',
   'packing.menuDeleteCat': 'Delete Category',
+  'packing.assignUser': 'Assign user',
+  'packing.noMembers': 'No trip members',
+  'packing.addItem': 'Add item',
+  'packing.addItemPlaceholder': 'Item name...',
+  'packing.addCategory': 'Add category',
+  'packing.newCategoryPlaceholder': 'Category name (e.g. Clothing)',
+  'packing.applyTemplate': 'Apply template',
+  'packing.template': 'Template',
+  'packing.templateApplied': '{count} items added from template',
+  'packing.templateError': 'Failed to apply template',
+  'packing.bags': 'Bags',
+  'packing.noBag': 'Unassigned',
+  'packing.totalWeight': 'Total weight',
+  'packing.bagName': 'Bag name...',
+  'packing.addBag': 'Add bag',
   'packing.changeCategory': 'Change Category',
   'packing.confirm.clearChecked': 'Are you sure you want to remove {count} checked items?',
   'packing.confirm.deleteCat': 'Are you sure you want to delete the category "{name}" with {count} items?',
@@ -858,7 +1171,27 @@ const en: Record<string, string> = {
   'backup.auto.enable': 'Enable auto-backup',
   'backup.auto.enableHint': 'Backups will be created automatically on the chosen schedule',
   'backup.auto.interval': 'Interval',
+  'backup.auto.hour': 'Run at hour',
+  'backup.auto.hourHint': 'Server local time ({format} format)',
+  'backup.auto.dayOfWeek': 'Day of week',
+  'backup.auto.dayOfMonth': 'Day of month',
+  'backup.auto.dayOfMonthHint': 'Limited to 1–28 for compatibility with all months',
+  'backup.auto.scheduleSummary': 'Schedule',
+  'backup.auto.summaryDaily': 'Every day at {hour}:00',
+  'backup.auto.summaryWeekly': 'Every {day} at {hour}:00',
+  'backup.auto.summaryMonthly': 'Day {day} of every month at {hour}:00',
+  'backup.auto.envLocked': 'Docker',
+  'backup.auto.envLockedHint': 'Auto-backup is configured via Docker environment variables. To change these settings, update your docker-compose.yml and restart the container.',
+  'backup.auto.copyEnv': 'Copy Docker env vars',
+  'backup.auto.envCopied': 'Docker env vars copied to clipboard',
   'backup.auto.keepLabel': 'Delete old backups after',
+  'backup.dow.sunday': 'Sun',
+  'backup.dow.monday': 'Mon',
+  'backup.dow.tuesday': 'Tue',
+  'backup.dow.wednesday': 'Wed',
+  'backup.dow.thursday': 'Thu',
+  'backup.dow.friday': 'Fri',
+  'backup.dow.saturday': 'Sat',
   'backup.interval.hourly': 'Hourly',
   'backup.interval.daily': 'Daily',
   'backup.interval.weekly': 'Weekly',
@@ -985,6 +1318,52 @@ const en: Record<string, string> = {
   'day.editAccommodation': 'Edit accommodation',
   'day.reservations': 'Reservations',
 
+  // Photos / Immich
+  'memories.title': 'Photos',
+  'memories.notConnected': 'Immich not connected',
+  'memories.notConnectedHint': 'Connect your Immich instance in Settings to see your trip photos here.',
+  'memories.noDates': 'Add dates to your trip to load photos.',
+  'memories.noPhotos': 'No photos found',
+  'memories.noPhotosHint': 'No photos found in Immich for this trip\'s date range.',
+  'memories.photosFound': 'photos',
+  'memories.fromOthers': 'from others',
+  'memories.sharePhotos': 'Share photos',
+  'memories.sharing': 'Sharing',
+  'memories.reviewTitle': 'Review your photos',
+  'memories.reviewHint': 'Click photos to exclude them from sharing.',
+  'memories.shareCount': 'Share {count} photos',
+  'memories.immichUrl': 'Immich Server URL',
+  'memories.immichApiKey': 'API Key',
+  'memories.testConnection': 'Test connection',
+  'memories.testFirst': 'Test connection first',
+  'memories.connected': 'Connected',
+  'memories.disconnected': 'Not connected',
+  'memories.connectionSuccess': 'Connected to Immich',
+  'memories.connectionError': 'Could not connect to Immich',
+  'memories.saved': 'Immich settings saved',
+  'memories.addPhotos': 'Add photos',
+  'memories.linkAlbum': 'Link Album',
+  'memories.selectAlbum': 'Select Immich Album',
+  'memories.noAlbums': 'No albums found',
+  'memories.syncAlbum': 'Sync album',
+  'memories.unlinkAlbum': 'Unlink album',
+  'memories.photos': 'photos',
+  'memories.selectPhotos': 'Select photos from Immich',
+  'memories.selectHint': 'Tap photos to select them.',
+  'memories.selected': 'selected',
+  'memories.addSelected': 'Add {count} photos',
+  'memories.alreadyAdded': 'Added',
+  'memories.private': 'Private',
+  'memories.stopSharing': 'Stop sharing',
+  'memories.oldest': 'Oldest first',
+  'memories.newest': 'Newest first',
+  'memories.allLocations': 'All locations',
+  'memories.tripDates': 'Trip dates',
+  'memories.allPhotos': 'All photos',
+  'memories.confirmShareTitle': 'Share with trip members?',
+  'memories.confirmShareHint': '{count} photos will be visible to all members of this trip. You can make individual photos private later.',
+  'memories.confirmShareButton': 'Share photos',
+
   // Collab Addon
   'collab.tabs.chat': 'Chat',
   'collab.tabs.notes': 'Notes',
@@ -1003,6 +1382,7 @@ const en: Record<string, string> = {
   'collab.chat.today': 'Today',
   'collab.chat.yesterday': 'Yesterday',
   'collab.chat.deletedMessage': 'deleted a message',
+  'collab.chat.reply': 'Reply',
   'collab.chat.loadMore': 'Load older messages',
   'collab.chat.justNow': 'just now',
   'collab.chat.minutesAgo': '{n}m ago',
@@ -1053,6 +1433,55 @@ const en: Record<string, string> = {
   'collab.polls.options': 'Options',
   'collab.polls.delete': 'Delete',
   'collab.polls.closedSection': 'Closed',
+
+  // Permissions
+  'admin.tabs.permissions': 'Permissions',
+  'perm.title': 'Permission Settings',
+  'perm.subtitle': 'Control who can perform actions across the application',
+  'perm.saved': 'Permission settings saved',
+  'perm.resetDefaults': 'Reset to defaults',
+  'perm.customized': 'customized',
+  'perm.level.admin': 'Admin only',
+  'perm.level.tripOwner': 'Trip owner',
+  'perm.level.tripMember': 'Trip members',
+  'perm.level.everybody': 'Everyone',
+  'perm.cat.trip': 'Trip Management',
+  'perm.cat.members': 'Member Management',
+  'perm.cat.files': 'Files',
+  'perm.cat.content': 'Content & Schedule',
+  'perm.cat.extras': 'Budget, Packing & Collaboration',
+  'perm.action.trip_create': 'Create trips',
+  'perm.action.trip_edit': 'Edit trip details',
+  'perm.action.trip_delete': 'Delete trips',
+  'perm.action.trip_archive': 'Archive / unarchive trips',
+  'perm.action.trip_cover_upload': 'Upload cover image',
+  'perm.action.member_manage': 'Add / remove members',
+  'perm.action.file_upload': 'Upload files',
+  'perm.action.file_edit': 'Edit file metadata',
+  'perm.action.file_delete': 'Delete files',
+  'perm.action.place_edit': 'Add / edit / delete places',
+  'perm.action.day_edit': 'Edit days, notes & assignments',
+  'perm.action.reservation_edit': 'Manage reservations',
+  'perm.action.budget_edit': 'Manage budget',
+  'perm.action.packing_edit': 'Manage packing lists',
+  'perm.action.collab_edit': 'Collaboration (notes, polls, chat)',
+  'perm.action.share_manage': 'Manage share links',
+  'perm.actionHint.trip_create': 'Who can create new trips',
+  'perm.actionHint.trip_edit': 'Who can change trip name, dates, description and currency',
+  'perm.actionHint.trip_delete': 'Who can permanently delete a trip',
+  'perm.actionHint.trip_archive': 'Who can archive or unarchive a trip',
+  'perm.actionHint.trip_cover_upload': 'Who can upload or change the cover image',
+  'perm.actionHint.member_manage': 'Who can invite or remove trip members',
+  'perm.actionHint.file_upload': 'Who can upload files to a trip',
+  'perm.actionHint.file_edit': 'Who can edit file descriptions and links',
+  'perm.actionHint.file_delete': 'Who can move files to trash or permanently delete them',
+  'perm.actionHint.place_edit': 'Who can add, edit or delete places',
+  'perm.actionHint.day_edit': 'Who can edit days, day notes and place assignments',
+  'perm.actionHint.reservation_edit': 'Who can create, edit or delete reservations',
+  'perm.actionHint.budget_edit': 'Who can create, edit or delete budget items',
+  'perm.actionHint.packing_edit': 'Who can manage packing items and bags',
+  'perm.actionHint.collab_edit': 'Who can create notes, polls and send messages',
+  'perm.actionHint.share_manage': 'Who can create or delete public share links',
 }
 
 export default en

client/src/pages/AdminPage.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { adminApi, authApi } from '../api/client'
+import apiClient, { adminApi, authApi, notificationsApi } from '../api/client'
 import { useAuthStore } from '../store/authStore'
 import { useSettingsStore } from '../store/settingsStore'
+import { useAddonStore } from '../store/addonStore'
 import { useTranslation } from '../i18n'
 import { getApiErrorMessage } from '../types'
 import Navbar from '../components/Layout/Navbar'
@@ -12,7 +13,11 @@ import CategoryManager from '../components/Admin/CategoryManager'
 import BackupPanel from '../components/Admin/BackupPanel'
 import GitHubPanel from '../components/Admin/GitHubPanel'
 import AddonManager from '../components/Admin/AddonManager'
-import { Users, Map, Briefcase, Shield, Trash2, Edit2, Camera, FileText, Eye, EyeOff, Save, CheckCircle, XCircle, Loader2, UserPlus, ArrowUpCircle, ExternalLink, Download, AlertTriangle, RefreshCw, GitBranch, Sun } from 'lucide-react'
+import PackingTemplateManager from '../components/Admin/PackingTemplateManager'
+import AuditLogPanel from '../components/Admin/AuditLogPanel'
+import AdminMcpTokensPanel from '../components/Admin/AdminMcpTokensPanel'
+import PermissionsPanel from '../components/Admin/PermissionsPanel'
+import { Users, Map, Briefcase, Shield, Trash2, Edit2, Camera, FileText, Eye, EyeOff, Save, CheckCircle, XCircle, Loader2, UserPlus, ArrowUpCircle, ExternalLink, Download, GitBranch, Sun, Link2, Copy, Plus, RefreshCw, AlertTriangle } from 'lucide-react'
 import CustomSelect from '../components/shared/CustomSelect'
 
 interface AdminUser {
@@ -39,6 +44,8 @@ interface OidcConfig {
   client_secret: string
   client_secret_set: boolean
   display_name: string
+  oidc_only: boolean
+  discovery_url: string
 }
 
 interface UpdateInfo {
@@ -50,15 +57,18 @@ interface UpdateInfo {
 }
 
 export default function AdminPage(): React.ReactElement {
-  const { demoMode } = useAuthStore()
+  const { demoMode, serverTimezone } = useAuthStore()
   const { t, locale } = useTranslation()
   const hour12 = useSettingsStore(s => s.settings.time_format) === '12h'
+  const mcpEnabled = useAddonStore(s => s.isEnabled('mcp'))
   const TABS = [
     { id: 'users', label: t('admin.tabs.users') },
-    { id: 'categories', label: t('admin.tabs.categories') },
+    { id: 'config', label: t('admin.tabs.config') },
     { id: 'addons', label: t('admin.tabs.addons') },
     { id: 'settings', label: t('admin.tabs.settings') },
     { id: 'backup', label: t('admin.tabs.backup') },
+    { id: 'audit', label: t('admin.tabs.audit') },
+    ...(mcpEnabled ? [{ id: 'mcp-tokens', label: t('admin.tabs.mcpTokens') }] : []),
     { id: 'github', label: t('admin.tabs.github') },
   ]
 
@@ -71,17 +81,37 @@ export default function AdminPage(): React.ReactElement {
   const [showCreateUser, setShowCreateUser] = useState<boolean>(false)
   const [createForm, setCreateForm] = useState<{ username: string; email: string; password: string; role: string }>({ username: '', email: '', password: '', role: 'user' })
 
+  // Bag tracking
+  const [bagTrackingEnabled, setBagTrackingEnabled] = useState<boolean>(false)
+  useEffect(() => { adminApi.getBagTracking().then(d => setBagTrackingEnabled(d.enabled)).catch(() => {}) }, [])
+
   // OIDC config
-  const [oidcConfig, setOidcConfig] = useState<OidcConfig>({ issuer: '', client_id: '', client_secret: '', client_secret_set: false, display_name: '' })
+  const [oidcConfig, setOidcConfig] = useState<OidcConfig>({ issuer: '', client_id: '', client_secret: '', client_secret_set: false, display_name: '', oidc_only: false, discovery_url: '' })
   const [savingOidc, setSavingOidc] = useState<boolean>(false)
 
   // Registration toggle
   const [allowRegistration, setAllowRegistration] = useState<boolean>(true)
+  const [requireMfa, setRequireMfa] = useState<boolean>(false)
+
+  // Invite links
+  const [invites, setInvites] = useState<any[]>([])
+  const [showCreateInvite, setShowCreateInvite] = useState<boolean>(false)
+  const [inviteForm, setInviteForm] = useState<{ max_uses: number; expires_in_days: number | '' }>({ max_uses: 1, expires_in_days: 7 })
 
   // File types
   const [allowedFileTypes, setAllowedFileTypes] = useState<string>('jpg,jpeg,png,gif,webp,heic,pdf,doc,docx,xls,xlsx,txt,csv')
   const [savingFileTypes, setSavingFileTypes] = useState<boolean>(false)
 
+  // SMTP settings
+  const [smtpValues, setSmtpValues] = useState<Record<string, string>>({})
+  const [smtpLoaded, setSmtpLoaded] = useState(false)
+  useEffect(() => {
+    apiClient.get('/auth/app-settings').then(r => {
+      setSmtpValues(r.data || {})
+      setSmtpLoaded(true)
+    }).catch(() => setSmtpLoaded(true))
+  }, [])
+
   // API Keys
   const [mapsKey, setMapsKey] = useState<string>('')
   const [weatherKey, setWeatherKey] = useState<string>('')
@@ -93,13 +123,14 @@ export default function AdminPage(): React.ReactElement {
   // Version check & update
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null)
   const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false)
-  const [updating, setUpdating] = useState<boolean>(false)
-  const [updateResult, setUpdateResult] = useState<'success' | 'error' | null>(null)
 
-  const { user: currentUser, updateApiKeys } = useAuthStore()
+  const { user: currentUser, updateApiKeys, setAppRequireMfa, setTripRemindersEnabled, logout } = useAuthStore()
   const navigate = useNavigate()
   const toast = useToast()
 
+  const [showRotateJwtModal, setShowRotateJwtModal] = useState<boolean>(false)
+  const [rotatingJwt, setRotatingJwt] = useState<boolean>(false)
+
   useEffect(() => {
     loadData()
     loadAppConfig()
@@ -113,12 +144,14 @@ export default function AdminPage(): React.ReactElement {
   const loadData = async () => {
     setIsLoading(true)
     try {
-      const [usersData, statsData] = await Promise.all([
+      const [usersData, statsData, invitesData] = await Promise.all([
         adminApi.users(),
         adminApi.stats(),
+        adminApi.listInvites().catch(() => ({ invites: [] })),
       ])
       setUsers(usersData.users)
       setStats(statsData)
+      setInvites(invitesData.invites || [])
     } catch (err: unknown) {
       toast.error(t('admin.toast.loadError'))
     } finally {
@@ -130,6 +163,7 @@ export default function AdminPage(): React.ReactElement {
     try {
       const config = await authApi.getAppConfig()
       setAllowRegistration(config.allow_registration)
+      if (config.require_mfa !== undefined) setRequireMfa(!!config.require_mfa)
       if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)
     } catch (err: unknown) {
       // ignore
@@ -146,26 +180,6 @@ export default function AdminPage(): React.ReactElement {
     }
   }
 
-  const handleInstallUpdate = async () => {
-    setUpdating(true)
-    setUpdateResult(null)
-    try {
-      await adminApi.installUpdate()
-      setUpdateResult('success')
-      // Server is restarting — poll until it comes back, then reload
-      const poll = setInterval(async () => {
-        try {
-          await authApi.getAppConfig()
-          clearInterval(poll)
-          window.location.reload()
-        } catch { /* still restarting */ }
-      }, 2000)
-    } catch {
-      setUpdateResult('error')
-      setUpdating(false)
-    }
-  }
-
   const handleToggleRegistration = async (value) => {
     setAllowRegistration(value)
     try {
@@ -176,6 +190,18 @@ export default function AdminPage(): React.ReactElement {
     }
   }
 
+  const handleToggleRequireMfa = async (value: boolean) => {
+    setRequireMfa(value)
+    try {
+      await authApi.updateAppSettings({ require_mfa: value })
+      setAppRequireMfa(value)
+      toast.success(t('common.saved'))
+    } catch (err: unknown) {
+      setRequireMfa(!value)
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    }
+  }
+
   const toggleKey = (key) => {
     setShowKeys(prev => ({ ...prev, [key]: !prev[key] }))
   }
@@ -228,6 +254,10 @@ export default function AdminPage(): React.ReactElement {
       toast.error(t('admin.toast.fieldsRequired'))
       return
     }
+    if (createForm.password.trim().length < 8) {
+      toast.error(t('settings.passwordTooShort'))
+      return
+    }
     try {
       const data = await adminApi.createUser(createForm)
       setUsers(prev => [data.user, ...prev])
@@ -239,6 +269,38 @@ export default function AdminPage(): React.ReactElement {
     }
   }
 
+  const handleCreateInvite = async () => {
+    try {
+      const data = await adminApi.createInvite({
+        max_uses: inviteForm.max_uses,
+        expires_in_days: inviteForm.expires_in_days || undefined,
+      })
+      setInvites(prev => [data.invite, ...prev])
+      setShowCreateInvite(false)
+      setInviteForm({ max_uses: 1, expires_in_days: 7 })
+      // Copy link to clipboard
+      const link = `${window.location.origin}/register?invite=${data.invite.token}`
+      navigator.clipboard.writeText(link).then(() => toast.success(t('admin.invite.copied')))
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('admin.invite.createError')))
+    }
+  }
+
+  const handleDeleteInvite = async (id: number) => {
+    try {
+      await adminApi.deleteInvite(id)
+      setInvites(prev => prev.filter(i => i.id !== id))
+      toast.success(t('admin.invite.deleted'))
+    } catch {
+      toast.error(t('admin.invite.deleteError'))
+    }
+  }
+
+  const copyInviteLink = (token: string) => {
+    const link = `${window.location.origin}/register?invite=${token}`
+    navigator.clipboard.writeText(link).then(() => toast.success(t('admin.invite.copied')))
+  }
+
   const handleEditUser = (user) => {
     setEditingUser(user)
     setEditForm({ username: user.username, email: user.email, role: user.role, password: '' })
@@ -246,12 +308,18 @@ export default function AdminPage(): React.ReactElement {
 
   const handleSaveUser = async () => {
     try {
-      const payload = {
+      const payload: { username?: string; email?: string; role: string; password?: string } = {
         username: editForm.username.trim() || undefined,
         email: editForm.email.trim() || undefined,
         role: editForm.role,
       }
-      if (editForm.password.trim()) payload.password = editForm.password.trim()
+      if (editForm.password.trim()) {
+        if (editForm.password.trim().length < 8) {
+          toast.error(t('settings.passwordTooShort'))
+          return
+        }
+        payload.password = editForm.password.trim()
+      }
       const data = await adminApi.updateUser(editingUser.id, payload)
       setUsers(prev => prev.map(u => u.id === editingUser.id ? data.user : u))
       setEditingUser(null)
@@ -288,7 +356,7 @@ export default function AdminPage(): React.ReactElement {
               <Shield className="w-5 h-5 text-slate-700" />
             </div>
             <div>
-              <h1 className="text-2xl font-bold text-slate-900">Administration</h1>
+              <h1 className="text-2xl font-bold text-slate-900">{t('admin.title')}</h1>
               <p className="text-slate-500 text-sm">{t('admin.subtitle')}</p>
             </div>
           </div>
@@ -319,23 +387,13 @@ export default function AdminPage(): React.ReactElement {
                     {t('admin.update.button')}
                   </a>
                 )}
-                {updateInfo.is_docker ? (
-                  <button
-                    onClick={() => setShowUpdateModal(true)}
-                    className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-gray-200"
-                  >
-                    <Download className="w-4 h-4" />
-                    {t('admin.update.howTo')}
-                  </button>
-                ) : (
-                  <button
-                    onClick={() => setShowUpdateModal(true)}
-                    className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-gray-200"
-                  >
-                    <Download className="w-4 h-4" />
-                    {t('admin.update.install')}
-                  </button>
-                )}
+                <button
+                  onClick={() => setShowUpdateModal(true)}
+                  className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-gray-200"
+                >
+                  <Download className="w-4 h-4" />
+                  {t('admin.update.howTo')}
+                </button>
               </div>
             </div>
           )}
@@ -467,10 +525,10 @@ export default function AdminPage(): React.ReactElement {
                             </span>
                           </td>
                           <td className="px-5 py-3 text-sm text-slate-500">
-                            {new Date(u.created_at).toLocaleDateString(locale)}
+                            {new Date(u.created_at).toLocaleDateString(locale, { timeZone: serverTimezone })}
                           </td>
                           <td className="px-5 py-3 text-sm text-slate-500">
-                            {u.last_login ? new Date(u.last_login).toLocaleDateString(locale, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12 }) : '—'}
+                            {u.last_login ? new Date(u.last_login).toLocaleDateString(locale, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12, timeZone: serverTimezone }) : '—'}
                           </td>
                           <td className="px-5 py-3">
                             <div className="flex items-center gap-2 justify-end">
@@ -500,9 +558,127 @@ export default function AdminPage(): React.ReactElement {
             </div>
           )}
 
-          {activeTab === 'categories' && <CategoryManager />}
+          {/* Invite Links (inside users tab) */}
+          {activeTab === 'users' && (
+            <div className="bg-white rounded-xl border border-slate-200 overflow-hidden mt-6">
+              <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+                <div>
+                  <h2 className="font-semibold text-slate-900">{t('admin.invite.title')}</h2>
+                  <p className="text-xs text-slate-400 mt-1">{t('admin.invite.subtitle')}</p>
+                </div>
+                <button
+                  onClick={() => setShowCreateInvite(true)}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors"
+                >
+                  <Plus className="w-4 h-4" />
+                  {t('admin.invite.create')}
+                </button>
+              </div>
 
-          {activeTab === 'addons' && <AddonManager />}
+              {invites.length === 0 ? (
+                <div className="p-8 text-center text-sm text-slate-400">{t('admin.invite.empty')}</div>
+              ) : (
+                <div className="divide-y divide-slate-100">
+                  {invites.map(inv => {
+                    const isExpired = inv.expires_at && new Date(inv.expires_at) < new Date()
+                    const isUsedUp = inv.max_uses > 0 && inv.used_count >= inv.max_uses
+                    const isActive = !isExpired && !isUsedUp
+                    return (
+                      <div key={inv.id} className="px-5 py-3 flex items-center gap-4">
+                        <Link2 className="w-4 h-4 flex-shrink-0" style={{ color: isActive ? 'var(--text-primary)' : '#d1d5db' }} />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <code className="text-xs font-mono text-slate-600 truncate">{inv.token.slice(0, 12)}...</code>
+                            <span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${
+                              isActive ? 'bg-green-50 text-green-700' : 'bg-slate-100 text-slate-400'
+                            }`}>
+                              {isUsedUp ? t('admin.invite.usedUp') : isExpired ? t('admin.invite.expired') : t('admin.invite.active')}
+                            </span>
+                          </div>
+                          <div className="text-xs text-slate-400 mt-0.5">
+                            {inv.used_count}/{inv.max_uses === 0 ? '∞' : inv.max_uses} {t('admin.invite.uses')}
+                            {inv.expires_at && ` · ${t('admin.invite.expiresAt')} ${new Date(inv.expires_at).toLocaleDateString(locale, { timeZone: serverTimezone })}`}
+                            {` · ${t('admin.invite.createdBy')} ${inv.created_by_name}`}
+                          </div>
+                        </div>
+                        {isActive && (
+                          <button onClick={() => copyInviteLink(inv.token)} title={t('admin.invite.copyLink')}
+                            className="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-700 transition-colors">
+                            <Copy className="w-3.5 h-3.5" />
+                          </button>
+                        )}
+                        <button onClick={() => handleDeleteInvite(inv.id)} title={t('common.delete')}
+                          className="p-1.5 rounded-lg hover:bg-red-50 text-slate-400 hover:text-red-500 transition-colors">
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === 'users' && <div className="mt-6"><PermissionsPanel /></div>}
+
+          {/* Create Invite Modal */}
+          <Modal isOpen={showCreateInvite} onClose={() => setShowCreateInvite(false)} title={t('admin.invite.create')} size="sm">
+            <div className="space-y-4">
+              <div>
+                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{t('admin.invite.maxUses')}</label>
+                <div className="flex gap-2">
+                  {[1, 2, 3, 4, 5, 0].map(n => (
+                    <button key={n} type="button" onClick={() => setInviteForm(f => ({ ...f, max_uses: n }))}
+                      className={`flex-1 py-2 rounded-lg text-sm font-semibold border transition-colors ${
+                        inviteForm.max_uses === n ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
+                      }`}>
+                      {n === 0 ? '∞' : `${n}×`}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{t('admin.invite.expiry')}</label>
+                <div className="flex gap-2">
+                  {[
+                    { value: 1, label: '1d' },
+                    { value: 3, label: '3d' },
+                    { value: 7, label: '7d' },
+                    { value: 14, label: '14d' },
+                    { value: '', label: '∞' },
+                  ].map(opt => (
+                    <button key={String(opt.value)} type="button" onClick={() => setInviteForm(f => ({ ...f, expires_in_days: opt.value as number | '' }))}
+                      className={`flex-1 py-2 rounded-lg text-sm font-semibold border transition-colors ${
+                        inviteForm.expires_in_days === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
+                      }`}>
+                      {opt.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div className="flex justify-end gap-2 pt-2 border-t border-slate-100">
+                <button onClick={() => setShowCreateInvite(false)} className="px-4 py-2 text-sm text-slate-500 hover:text-slate-700">{t('common.cancel')}</button>
+                <button onClick={handleCreateInvite} className="px-4 py-2 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700">{t('admin.invite.createAndCopy')}</button>
+              </div>
+            </div>
+          </Modal>
+
+          {activeTab === 'config' && (
+            <div className="space-y-6">
+              <PackingTemplateManager />
+              <CategoryManager />
+            </div>
+          )}
+
+          {activeTab === 'addons' && (
+            <div className="space-y-6">
+              <AddonManager bagTrackingEnabled={bagTrackingEnabled} onToggleBagTracking={async () => {
+                const next = !bagTrackingEnabled
+                setBagTrackingEnabled(next)
+                try { await adminApi.updateBagTracking(next) } catch { setBagTrackingEnabled(!next) }
+              }} />
+            </div>
+          )}
 
           {activeTab === 'settings' && (
             <div className="space-y-6">
@@ -519,14 +695,38 @@ export default function AdminPage(): React.ReactElement {
                     </div>
                     <button
                       onClick={() => handleToggleRegistration(!allowRegistration)}
-                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                        allowRegistration ? 'bg-slate-900' : 'bg-slate-300'
-                      }`}
+                      className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                      style={{ background: allowRegistration ? 'var(--text-primary)' : 'var(--border-primary)' }}
                     >
                       <span
-                        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                          allowRegistration ? 'translate-x-6' : 'translate-x-1'
-                        }`}
+                        className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: allowRegistration ? 'translateX(20px)' : 'translateX(0)' }}
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Require 2FA for all users */}
+              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                <div className="px-6 py-4 border-b border-slate-100">
+                  <h2 className="font-semibold text-slate-900">{t('admin.requireMfa')}</h2>
+                </div>
+                <div className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium text-slate-700">{t('admin.requireMfa')}</p>
+                      <p className="text-xs text-slate-400 mt-0.5">{t('admin.requireMfaHint')}</p>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => handleToggleRequireMfa(!requireMfa)}
+                      className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                      style={{ background: requireMfa ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                    >
+                      <span
+                        className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: requireMfa ? 'translateX(20px)' : 'translateX(0)' }}
                       />
                     </button>
                   </div>
@@ -696,6 +896,17 @@ export default function AdminPage(): React.ReactElement {
                     />
                     <p className="text-xs text-slate-400 mt-1">{t('admin.oidcIssuerHint')}</p>
                   </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700 mb-1.5">Discovery URL <span className="text-slate-400 font-normal">(optional)</span></label>
+                    <input
+                      type="url"
+                      value={oidcConfig.discovery_url}
+                      onChange={e => setOidcConfig(c => ({ ...c, discovery_url: e.target.value }))}
+                      placeholder='https://auth.example.com/application/o/trek/.well-known/openid-configuration'
+                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                    />
+                    <p className="text-xs text-slate-400 mt-1">Override the auto-constructed discovery URL. Required for providers like Authentik where the endpoint is not at <code className="bg-slate-100 px-1 rounded">{'<issuer>/.well-known/openid-configuration'}</code>.</p>
+                  </div>
                   <div>
                     <label className="block text-sm font-medium text-slate-700 mb-1.5">Client ID</label>
                     <input
@@ -715,11 +926,29 @@ export default function AdminPage(): React.ReactElement {
                       className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
                     />
                   </div>
+                  {/* OIDC-only mode toggle */}
+                  <div className="flex items-center justify-between pt-2 border-t border-slate-100">
+                    <div>
+                      <p className="text-sm font-medium text-slate-700">{t('admin.oidcOnlyMode')}</p>
+                      <p className="text-xs text-slate-400 mt-0.5">{t('admin.oidcOnlyModeHint')}</p>
+                    </div>
+                    <button
+                      onClick={() => setOidcConfig(c => ({ ...c, oidc_only: !c.oidc_only }))}
+                      className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ml-4"
+                      style={{ background: oidcConfig.oidc_only ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                    >
+                      <span
+                        className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: oidcConfig.oidc_only ? 'translateX(20px)' : 'translateX(0)' }}
+                      />
+                    </button>
+                  </div>
+
                   <button
                     onClick={async () => {
                       setSavingOidc(true)
                       try {
-                        const payload = { issuer: oidcConfig.issuer, client_id: oidcConfig.client_id, display_name: oidcConfig.display_name }
+                        const payload: Record<string, unknown> = { issuer: oidcConfig.issuer, client_id: oidcConfig.client_id, display_name: oidcConfig.display_name, oidc_only: oidcConfig.oidc_only, discovery_url: oidcConfig.discovery_url }
                         if (oidcConfig.client_secret) payload.client_secret = oidcConfig.client_secret
                         await adminApi.updateOidc(payload)
                         toast.success(t('admin.oidcSaved'))
@@ -737,11 +966,222 @@ export default function AdminPage(): React.ReactElement {
                   </button>
                 </div>
               </div>
+              {/* Notifications — exclusive channel selector */}
+              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                <div className="px-6 py-4 border-b border-slate-100">
+                  <h2 className="font-semibold text-slate-900">{t('admin.notifications.title')}</h2>
+                  <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.hint')}</p>
+                </div>
+                <div className="p-6 space-y-4">
+                  {/* Channel selector */}
+                  <div className="flex gap-2">
+                    {(['none', 'email', 'webhook'] as const).map(ch => {
+                      const active = (smtpValues.notification_channel || 'none') === ch
+                      const labels: Record<string, string> = { none: t('admin.notifications.none'), email: t('admin.notifications.email'), webhook: t('admin.notifications.webhook') }
+                      return (
+                        <button
+                          key={ch}
+                          onClick={() => setSmtpValues(prev => ({ ...prev, notification_channel: ch }))}
+                          className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors border ${active ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-300 hover:bg-slate-50'}`}
+                        >
+                          {labels[ch]}
+                        </button>
+                      )
+                    })}
+                  </div>
+
+                  {/* Notification event toggles — shown when any channel is active */}
+                  {(smtpValues.notification_channel || 'none') !== 'none' && (() => {
+                    const ch = smtpValues.notification_channel || 'none'
+                    const configValid = ch === 'email' ? !!(smtpValues.smtp_host?.trim()) : ch === 'webhook' ? !!(smtpValues.notification_webhook_url?.trim()) : false
+                    return (
+                    <div className={`space-y-2 pt-2 border-t border-slate-100 ${!configValid ? 'opacity-50 pointer-events-none' : ''}`}>
+                      <p className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-2">{t('admin.notifications.events')}</p>
+                      {!configValid && (
+                        <p className="text-[10px] text-amber-600 mb-3">{t('admin.notifications.configureFirst')}</p>
+                      )}
+                      <p className="text-[10px] text-slate-400 mb-3">{t('admin.notifications.eventsHint')}</p>
+                      {[
+                        { key: 'notify_trip_invite', label: t('settings.notifyTripInvite') },
+                        { key: 'notify_booking_change', label: t('settings.notifyBookingChange') },
+                        { key: 'notify_trip_reminder', label: t('settings.notifyTripReminder') },
+                        { key: 'notify_vacay_invite', label: t('settings.notifyVacayInvite') },
+                        { key: 'notify_photos_shared', label: t('settings.notifyPhotosShared') },
+                        { key: 'notify_collab_message', label: t('settings.notifyCollabMessage') },
+                        { key: 'notify_packing_tagged', label: t('settings.notifyPackingTagged') },
+                      ].map(opt => {
+                        const isOn = (smtpValues[opt.key] ?? 'true') !== 'false'
+                        return (
+                          <div key={opt.key} className="flex items-center justify-between py-1">
+                            <span className="text-sm text-slate-700">{opt.label}</span>
+                            <button
+                              onClick={() => {
+                                const newVal = isOn ? 'false' : 'true'
+                                setSmtpValues(prev => ({ ...prev, [opt.key]: newVal }))
+                              }}
+                              className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                              style={{ background: isOn ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                            >
+                              <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                                style={{ transform: isOn ? 'translateX(20px)' : 'translateX(0)' }} />
+                            </button>
+                          </div>
+                        )
+                      })}
+                    </div>
+                    )
+                  })()}
+
+                  {/* Email (SMTP) settings — shown when email channel is active */}
+                  {(smtpValues.notification_channel || 'none') === 'email' && (
+                    <div className="space-y-3 pt-2 border-t border-slate-100">
+                      <p className="text-xs text-slate-400">{t('admin.smtp.hint')}</p>
+                      {smtpLoaded && [
+                        { key: 'smtp_host', label: 'SMTP Host', placeholder: 'mail.example.com' },
+                        { key: 'smtp_port', label: 'SMTP Port', placeholder: '587' },
+                        { key: 'smtp_user', label: 'SMTP User', placeholder: 'trek@example.com' },
+                        { key: 'smtp_pass', label: 'SMTP Password', placeholder: '••••••••', type: 'password' },
+                        { key: 'smtp_from', label: 'From Address', placeholder: 'trek@example.com' },
+                      ].map(field => (
+                        <div key={field.key}>
+                          <label className="block text-xs font-medium text-slate-500 mb-1">{field.label}</label>
+                          <input
+                            type={field.type || 'text'}
+                            value={smtpValues[field.key] || ''}
+                            onChange={e => setSmtpValues(prev => ({ ...prev, [field.key]: e.target.value }))}
+                            placeholder={field.placeholder}
+                            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                          />
+                        </div>
+                      ))}
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 0' }}>
+                        <div>
+                          <span className="text-xs font-medium text-slate-500">Skip TLS certificate check</span>
+                          <p className="text-[10px] text-slate-400 mt-0.5">Enable for self-signed certificates on local mail servers</p>
+                        </div>
+                        <button onClick={() => {
+                          const newVal = smtpValues.smtp_skip_tls_verify === 'true' ? 'false' : 'true'
+                          setSmtpValues(prev => ({ ...prev, smtp_skip_tls_verify: newVal }))
+                        }}
+                          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                          style={{ background: smtpValues.smtp_skip_tls_verify === 'true' ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+                          <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                            style={{ transform: smtpValues.smtp_skip_tls_verify === 'true' ? 'translateX(20px)' : 'translateX(0)' }} />
+                        </button>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Webhook settings — shown when webhook channel is active */}
+                  {(smtpValues.notification_channel || 'none') === 'webhook' && (
+                    <div className="space-y-3 pt-2 border-t border-slate-100">
+                      <p className="text-xs text-slate-400">{t('admin.webhook.hint')}</p>
+                      <div>
+                        <label className="block text-xs font-medium text-slate-500 mb-1">Webhook URL</label>
+                        <input
+                          type="text"
+                          value={smtpValues.notification_webhook_url || ''}
+                          onChange={e => setSmtpValues(prev => ({ ...prev, notification_webhook_url: e.target.value }))}
+                          placeholder="https://discord.com/api/webhooks/..."
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                        />
+                        <p className="text-[10px] text-slate-400 mt-1">TREK will POST JSON with event, title, body, and timestamp to this URL.</p>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Save + Test buttons */}
+                  <div className="flex items-center gap-2 pt-2 border-t border-slate-100">
+                    <button
+                      onClick={async () => {
+                        const notifKeys = ['notification_channel', 'notification_webhook_url', 'smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify', 'notify_trip_invite', 'notify_booking_change', 'notify_trip_reminder', 'notify_vacay_invite', 'notify_photos_shared', 'notify_collab_message', 'notify_packing_tagged']
+                        const payload: Record<string, string> = {}
+                        for (const k of notifKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
+                        try {
+                          await authApi.updateAppSettings(payload)
+                          toast.success(t('admin.notifications.saved'))
+                          authApi.getAppConfig().then((c: { trip_reminders_enabled?: boolean }) => {
+                            if (c?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(c.trip_reminders_enabled)
+                          }).catch(() => {})
+                        } catch { toast.error(t('common.error')) }
+                      }}
+                      className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors"
+                    >
+                      <Save className="w-4 h-4" />
+                      {t('common.save')}
+                    </button>
+                    {(smtpValues.notification_channel || 'none') === 'email' && (
+                      <button
+                        onClick={async () => {
+                          const smtpKeys = ['smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify']
+                          const payload: Record<string, string> = {}
+                          for (const k of smtpKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
+                          await authApi.updateAppSettings(payload).catch(() => {})
+                          try {
+                            const result = await notificationsApi.testSmtp()
+                            if (result.success) toast.success(t('admin.smtp.testSuccess'))
+                            else toast.error(result.error || t('admin.smtp.testFailed'))
+                          } catch { toast.error(t('admin.smtp.testFailed')) }
+                        }}
+                        className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+                      >
+                        {t('admin.smtp.testButton')}
+                      </button>
+                    )}
+                    {(smtpValues.notification_channel || 'none') === 'webhook' && (
+                      <button
+                        onClick={async () => {
+                          if (smtpValues.notification_webhook_url) {
+                            await authApi.updateAppSettings({ notification_webhook_url: smtpValues.notification_webhook_url }).catch(() => {})
+                          }
+                          try {
+                            const result = await notificationsApi.testWebhook()
+                            if (result.success) toast.success(t('admin.notifications.testWebhookSuccess'))
+                            else toast.error(result.error || t('admin.notifications.testWebhookFailed'))
+                          } catch { toast.error(t('admin.notifications.testWebhookFailed')) }
+                        }}
+                        className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+                      >
+                        {t('admin.notifications.testWebhook')}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Danger Zone */}
+              <div className="bg-white rounded-xl border border-red-200 overflow-hidden">
+                <div className="px-6 py-4 border-b border-red-100 bg-red-50">
+                  <h2 className="font-semibold text-red-700 flex items-center gap-2">
+                    <AlertTriangle className="w-4 h-4" />
+                    Danger Zone
+                  </h2>
+                </div>
+                <div className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium text-slate-700">Rotate JWT Secret</p>
+                      <p className="text-xs text-slate-400 mt-0.5">Generate a new JWT signing secret. All active sessions will be invalidated immediately.</p>
+                    </div>
+                    <button
+                      onClick={() => setShowRotateJwtModal(true)}
+                      className="flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors"
+                    >
+                      <RefreshCw className="w-4 h-4" />
+                      Rotate
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
           )}
 
           {activeTab === 'backup' && <BackupPanel />}
 
+          {activeTab === 'audit' && <AuditLogPanel serverTimezone={serverTimezone} />}
+
+          {activeTab === 'mcp-tokens' && <AdminMcpTokensPanel />}
+
           {activeTab === 'github' && <GitHubPanel />}
         </div>
       </div>
@@ -882,78 +1322,37 @@ export default function AdminPage(): React.ReactElement {
         )}
       </Modal>
 
-      {/* Update confirmation popup — matches backup restore style */}
+      {/* Update instructions popup */}
       {showUpdateModal && (
         <div
           style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-          onClick={() => { if (!updating) setShowUpdateModal(false) }}
+          onClick={() => setShowUpdateModal(false)}
         >
           <div
             onClick={e => e.stopPropagation()}
             style={{ width: '100%', maxWidth: 440, borderRadius: 16, overflow: 'hidden' }}
             className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
           >
-            {updateResult === 'success' ? (
-              <>
-                <div style={{ background: 'linear-gradient(135deg, #16a34a, #15803d)', padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
-                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                    <CheckCircle size={20} style={{ color: 'white' }} />
-                  </div>
-                  <div>
-                    <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'white' }}>{t('admin.update.success')}</h3>
-                  </div>
-                </div>
-                <div style={{ padding: '20px 24px', textAlign: 'center' }}>
-                  <RefreshCw className="w-5 h-5 animate-spin mx-auto mb-2" style={{ color: 'var(--text-muted)' }} />
-                  <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>{t('admin.update.reloadHint')}</p>
-                </div>
-              </>
-            ) : updateResult === 'error' ? (
-              <>
-                <div style={{ background: 'linear-gradient(135deg, #dc2626, #b91c1c)', padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
-                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                    <XCircle size={20} style={{ color: 'white' }} />
-                  </div>
-                  <div>
-                    <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'white' }}>{t('admin.update.failed')}</h3>
-                  </div>
-                </div>
-                <div style={{ padding: '0 24px 20px', display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
-                  <button
-                    onClick={() => { setShowUpdateModal(false); setUpdateResult(null) }}
-                    className="bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-gray-200"
-                    style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
-                  >
-                    {t('common.cancel')}
-                  </button>
-                </div>
-              </>
-            ) : (
-              <>
-                {/* Red header */}
-                <div style={{ background: 'linear-gradient(135deg, #dc2626, #b91c1c)', padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
-                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                    <AlertTriangle size={20} style={{ color: 'white' }} />
-                  </div>
-                  <div>
-                    <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'white' }}>{t('admin.update.confirmTitle')}</h3>
-                    <p style={{ margin: '2px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>
-                      v{updateInfo?.current} → v{updateInfo?.latest}
-                    </p>
-                  </div>
-                </div>
+            <div style={{ background: 'linear-gradient(135deg, #0f172a, #1e293b)', padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
+              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                <ArrowUpCircle size={20} style={{ color: 'white' }} />
+              </div>
+              <div>
+                <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'white' }}>{t('admin.update.howTo')}</h3>
+                <p style={{ margin: '2px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>
+                  v{updateInfo?.current} → v{updateInfo?.latest}
+                </p>
+              </div>
+            </div>
 
-                {/* Body */}
-                <div style={{ padding: '20px 24px' }}>
-                  {updateInfo?.is_docker ? (
-                    <>
-                      <p className="text-gray-700 dark:text-gray-300" style={{ fontSize: 13, lineHeight: 1.6, margin: 0 }}>
-                        {t('admin.update.dockerText').replace('{version}', `v${updateInfo.latest}`)}
-                      </p>
+            <div style={{ padding: '20px 24px' }}>
+              <p className="text-gray-700 dark:text-gray-300" style={{ fontSize: 13, lineHeight: 1.6, margin: 0 }}>
+                {t('admin.update.dockerText').replace('{version}', `v${updateInfo?.latest ?? ''}`)}
+              </p>
 
-                      <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, fontSize: 12, lineHeight: 1.8, fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}
-                        className="bg-gray-900 dark:bg-gray-950 text-gray-100 border border-gray-700"
-                      >
+              <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, fontSize: 12, lineHeight: 1.8, fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}
+                className="bg-gray-900 dark:bg-gray-950 text-gray-100 border border-gray-700"
+              >
 {`docker pull mauriceboe/nomad:latest
 docker stop nomad && docker rm nomad
 docker run -d --name nomad \\
@@ -962,90 +1361,93 @@ docker run -d --name nomad \\
   -v /opt/nomad/uploads:/app/uploads \\
   --restart unless-stopped \\
   mauriceboe/nomad:latest`}
-                      </div>
+              </div>
 
-                      <div style={{ marginTop: 10, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
-                        className="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800"
-                      >
-                        <div className="flex items-start gap-2">
-                          <CheckCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
-                          <span>{t('admin.update.dataInfo')}</span>
-                        </div>
-                      </div>
-                    </>
-                  ) : (
-                    <>
-                      <p className="text-gray-700 dark:text-gray-300" style={{ fontSize: 13, lineHeight: 1.6, margin: 0 }}>
-                        {updateInfo && t('admin.update.confirmText').replace('{current}', `v${updateInfo.current}`).replace('{version}', `v${updateInfo.latest}`)}
-                      </p>
-
-                      <div style={{ marginTop: 14, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
-                        className="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800"
-                      >
-                        <div className="flex items-start gap-2">
-                          <CheckCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
-                          <span>{t('admin.update.dataInfo')}</span>
-                        </div>
-                      </div>
-
-                      <div style={{ marginTop: 10, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
-                        className="bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800"
-                      >
-                        <div className="flex items-start gap-2">
-                          <Download className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
-                          <span>
-                            {t('admin.update.backupHint')}{' '}
-                            <button
-                              onClick={() => { setShowUpdateModal(false); setActiveTab('backup') }}
-                              className="underline font-semibold hover:text-blue-950 dark:hover:text-blue-100"
-                            >{t('admin.update.backupLink')}</button>
-                          </span>
-                        </div>
-                      </div>
-
-                      <div style={{ marginTop: 10, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
-                        className="bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800"
-                      >
-                        <div className="flex items-start gap-2">
-                          <AlertTriangle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
-                          <span>{t('admin.update.warning')}</span>
-                        </div>
-                      </div>
-                    </>
-                  )}
+              <div style={{ marginTop: 10, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
+                className="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800"
+              >
+                <div className="flex items-start gap-2">
+                  <CheckCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
+                  <span>{t('admin.update.dataInfo')}</span>
                 </div>
+              </div>
 
-                {/* Footer */}
-                <div style={{ padding: '0 24px 20px', display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
-                  <button
-                    onClick={() => setShowUpdateModal(false)}
-                    disabled={updating}
-                    className="text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40"
-                    style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
-                  >
-                    {t('common.cancel')}
-                  </button>
-                  {!updateInfo?.is_docker && (
-                    <button
-                      onClick={handleInstallUpdate}
-                      disabled={updating}
-                      className="bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-gray-200 disabled:opacity-60 flex items-center gap-2"
-                      style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
-                    >
-                      {updating ? (
-                        <Loader2 size={14} className="animate-spin" />
-                      ) : (
-                        <Download size={14} />
-                      )}
-                      {updating ? t('admin.update.installing') : t('admin.update.confirm')}
-                    </button>
-                  )}
+              {updateInfo?.release_url && (
+                <div style={{ marginTop: 10, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
+                  className="bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800"
+                >
+                  <div className="flex items-start gap-2">
+                    <ExternalLink className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
+                    <span>
+                      <a href={updateInfo.release_url} target="_blank" rel="noopener noreferrer" className="underline font-semibold">
+                        {t('admin.update.button')}
+                      </a>
+                    </span>
+                  </div>
                 </div>
-              </>
-            )}
+              )}
+            </div>
+
+            <div style={{ padding: '0 24px 20px', display: 'flex', justifyContent: 'flex-end' }}>
+              <button
+                onClick={() => setShowUpdateModal(false)}
+                className="bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-gray-200"
+                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
+              >
+                {t('common.close')}
+              </button>
+            </div>
           </div>
         </div>
       )}
+
+      {/* Rotate JWT Secret confirmation modal */}
+      <Modal
+        isOpen={showRotateJwtModal}
+        onClose={() => setShowRotateJwtModal(false)}
+        title="Rotate JWT Secret"
+        size="sm"
+        footer={
+          <div className="flex gap-3 justify-end">
+            <button
+              onClick={() => setShowRotateJwtModal(false)}
+              disabled={rotatingJwt}
+              className="px-4 py-2 text-sm text-slate-600 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50"
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              onClick={async () => {
+                setRotatingJwt(true)
+                try {
+                  await adminApi.rotateJwtSecret()
+                  setShowRotateJwtModal(false)
+                  logout()
+                  navigate('/login')
+                } catch {
+                  toast.error(t('common.error'))
+                  setRotatingJwt(false)
+                }
+              }}
+              disabled={rotatingJwt}
+              className="flex items-center gap-2 px-4 py-2 text-sm bg-red-600 hover:bg-red-700 disabled:bg-red-300 text-white rounded-lg font-medium"
+            >
+              {rotatingJwt ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <RefreshCw className="w-4 h-4" />}
+              Rotate &amp; Log out
+            </button>
+          </div>
+        }
+      >
+        <div className="flex gap-3">
+          <div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
+            <AlertTriangle className="w-5 h-5 text-red-600" />
+          </div>
+          <div>
+            <p className="text-sm font-medium text-slate-900 mb-1">Warning, this will invalidate all sessions and log you out.</p>
+            <p className="text-xs text-slate-500">A new JWT secret will be generated immediately. Every logged-in user — including you — will be signed out and will need to log in again.</p>
+          </div>
+        </div>
+      </Modal>
     </div>
   )
 }

client/src/pages/AtlasPage.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useMemo, useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useTranslation } from '../i18n'
+import { getIntlLanguage, getLocaleForLanguage, useTranslation } from '../i18n'
 import { useSettingsStore } from '../store/settingsStore'
 import Navbar from '../components/Layout/Navbar'
-import apiClient from '../api/client'
-import { Globe, MapPin, Briefcase, Calendar, Flag, ChevronRight, PanelLeftOpen, PanelLeftClose, X } from 'lucide-react'
+import apiClient, { mapsApi } from '../api/client'
+import CustomSelect from '../components/shared/CustomSelect'
+import { Globe, MapPin, Briefcase, Calendar, Flag, ChevronRight, PanelLeftOpen, PanelLeftClose, X, Star, Plus, Trash2, Search } from 'lucide-react'
 import L from 'leaflet'
 import type { AtlasPlace, GeoJsonFeatureCollection, TranslationFn } from '../types'
 
@@ -40,6 +41,7 @@ interface AtlasData {
 interface CountryDetail {
   places: AtlasPlace[]
   trips: { id: number; title: string }[]
+  manually_marked?: boolean
 }
 
 function MobileStats({ data, stats, countries, resolveName, t, dark }: { data: AtlasData | null; stats: AtlasStats; countries: AtlasCountry[]; resolveName: (code: string) => string; t: TranslationFn; dark: boolean }): React.ReactElement {
@@ -100,7 +102,7 @@ function useCountryNames(language: string): (code: string) => string {
   const [resolver, setResolver] = useState<(code: string) => string>(() => (code: string) => code)
   useEffect(() => {
     try {
-      const dn = new Intl.DisplayNames([language === 'de' ? 'de' : 'en'], { type: 'region' })
+      const dn = new Intl.DisplayNames([getIntlLanguage(language)], { type: 'region' })
       setResolver(() => (code: string) => { try { return dn.of(code) || code } catch { return code } })
     } catch { /* */ }
   }, [language])
@@ -108,7 +110,9 @@ function useCountryNames(language: string): (code: string) => string {
 }
 
 // Map visited country codes to ISO-3166 alpha3 (GeoJSON uses alpha3)
-const A2_TO_A3: Record<string, string> = {"AF":"AFG","AL":"ALB","DZ":"DZA","AD":"AND","AO":"AGO","AR":"ARG","AM":"ARM","AU":"AUS","AT":"AUT","AZ":"AZE","BR":"BRA","BE":"BEL","BG":"BGR","CA":"CAN","CL":"CHL","CN":"CHN","CO":"COL","HR":"HRV","CZ":"CZE","DK":"DNK","EG":"EGY","EE":"EST","FI":"FIN","FR":"FRA","DE":"DEU","GR":"GRC","HU":"HUN","IS":"ISL","IN":"IND","ID":"IDN","IR":"IRN","IQ":"IRQ","IE":"IRL","IL":"ISR","IT":"ITA","JP":"JPN","KE":"KEN","KR":"KOR","LV":"LVA","LT":"LTU","LU":"LUX","MY":"MYS","MX":"MEX","MA":"MAR","NL":"NLD","NZ":"NZL","NO":"NOR","PK":"PAK","PE":"PER","PH":"PHL","PL":"POL","PT":"PRT","RO":"ROU","RU":"RUS","SA":"SAU","RS":"SRB","SK":"SVK","SI":"SVN","ZA":"ZAF","ES":"ESP","SE":"SWE","CH":"CHE","TH":"THA","TR":"TUR","UA":"UKR","AE":"ARE","GB":"GBR","US":"USA","VN":"VNM","NG":"NGA"}
+// Built dynamically from GeoJSON + hardcoded fallbacks
+const A2_TO_A3_BASE: Record<string, string> = {"AF":"AFG","AL":"ALB","DZ":"DZA","AD":"AND","AO":"AGO","AG":"ATG","AR":"ARG","AM":"ARM","AU":"AUS","AT":"AUT","AZ":"AZE","BS":"BHS","BH":"BHR","BD":"BGD","BB":"BRB","BY":"BLR","BE":"BEL","BZ":"BLZ","BJ":"BEN","BT":"BTN","BO":"BOL","BA":"BIH","BW":"BWA","BR":"BRA","BN":"BRN","BG":"BGR","BF":"BFA","BI":"BDI","CV":"CPV","KH":"KHM","CM":"CMR","CA":"CAN","CF":"CAF","TD":"TCD","CL":"CHL","CN":"CHN","CO":"COL","KM":"COM","CG":"COG","CD":"COD","CR":"CRI","CI":"CIV","HR":"HRV","CU":"CUB","CY":"CYP","CZ":"CZE","DK":"DNK","DJ":"DJI","DM":"DMA","DO":"DOM","EC":"ECU","EG":"EGY","SV":"SLV","GQ":"GNQ","ER":"ERI","EE":"EST","SZ":"SWZ","ET":"ETH","FJ":"FJI","FI":"FIN","FR":"FRA","GA":"GAB","GM":"GMB","GE":"GEO","DE":"DEU","GH":"GHA","GR":"GRC","GD":"GRD","GT":"GTM","GN":"GIN","GW":"GNB","GY":"GUY","HT":"HTI","HN":"HND","HU":"HUN","IS":"ISL","IN":"IND","ID":"IDN","IR":"IRN","IQ":"IRQ","IE":"IRL","IL":"ISR","IT":"ITA","JM":"JAM","JP":"JPN","JO":"JOR","KZ":"KAZ","KE":"KEN","KI":"KIR","KP":"PRK","KR":"KOR","KW":"KWT","KG":"KGZ","LA":"LAO","LV":"LVA","LB":"LBN","LS":"LSO","LR":"LBR","LY":"LBY","LI":"LIE","LT":"LTU","LU":"LUX","MG":"MDG","MW":"MWI","MY":"MYS","MV":"MDV","ML":"MLI","MT":"MLT","MR":"MRT","MU":"MUS","MX":"MEX","MD":"MDA","MN":"MNG","ME":"MNE","MA":"MAR","MZ":"MOZ","MM":"MMR","NA":"NAM","NP":"NPL","NL":"NLD","NZ":"NZL","NI":"NIC","NE":"NER","NG":"NGA","MK":"MKD","NO":"NOR","OM":"OMN","PK":"PAK","PA":"PAN","PG":"PNG","PY":"PRY","PE":"PER","PH":"PHL","PL":"POL","PT":"PRT","QA":"QAT","RO":"ROU","RU":"RUS","RW":"RWA","SA":"SAU","SN":"SEN","RS":"SRB","SL":"SLE","SG":"SGP","SK":"SVK","SI":"SVN","SB":"SLB","SO":"SOM","ZA":"ZAF","SS":"SSD","ES":"ESP","LK":"LKA","SD":"SDN","SR":"SUR","SE":"SWE","CH":"CHE","SY":"SYR","TW":"TWN","TJ":"TJK","TZ":"TZA","TH":"THA","TL":"TLS","TG":"TGO","TT":"TTO","TN":"TUN","TR":"TUR","TM":"TKM","UG":"UGA","UA":"UKR","AE":"ARE","GB":"GBR","US":"USA","UY":"URY","UZ":"UZB","VU":"VUT","VE":"VEN","VN":"VNM","YE":"YEM","ZM":"ZMB","ZW":"ZWE"}
+let A2_TO_A3: Record<string, string> = { ...A2_TO_A3_BASE }
 
 export default function AtlasPage(): React.ReactElement {
   const { t, language } = useTranslation()
@@ -123,6 +127,7 @@ export default function AtlasPage(): React.ReactElement {
   const glareRef = useRef<HTMLDivElement>(null)
   const borderGlareRef = useRef<HTMLDivElement>(null)
   const panelRef = useRef<HTMLDivElement>(null)
+  const country_layer_by_a2_ref = useRef<Record<string, any>>({})
 
   const handlePanelMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
     if (!panelRef.current || !glareRef.current || !borderGlareRef.current) return
@@ -135,7 +140,7 @@ export default function AtlasPage(): React.ReactElement {
     // Border glow that follows cursor
     borderGlareRef.current.style.opacity = '1'
     borderGlareRef.current.style.maskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
-    borderGlareRef.current.style.WebkitMaskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+    borderGlareRef.current.style.webkitMaskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
   }
   const handlePanelMouseLeave = () => {
     if (glareRef.current) glareRef.current.style.opacity = '0'
@@ -149,20 +154,70 @@ export default function AtlasPage(): React.ReactElement {
   const [selectedCountry, setSelectedCountry] = useState<string | null>(null)
   const [countryDetail, setCountryDetail] = useState<CountryDetail | null>(null)
   const [geoData, setGeoData] = useState<GeoJsonFeatureCollection | null>(null)
+  const [confirmAction, setConfirmAction] = useState<{ type: 'mark' | 'unmark' | 'choose' | 'bucket'; code: string; name: string } | null>(null)
+  const [bucketMonth, setBucketMonth] = useState(0)
+  const [bucketYear, setBucketYear] = useState(0)
 
-  // Load atlas data
+  // Bucket list
+  interface BucketItem { id: number; name: string; lat: number | null; lng: number | null; country_code: string | null; notes: string | null; target_date: string | null }
+  const [bucketList, setBucketList] = useState<BucketItem[]>([])
+  const [showBucketAdd, setShowBucketAdd] = useState(false)
+  const [bucketForm, setBucketForm] = useState({ name: '', notes: '', lat: '', lng: '', target_date: '' })
+  const [bucketSearch, setBucketSearch] = useState('')
+  const [bucketSearchResults, setBucketSearchResults] = useState<any[]>([])
+  const [bucketSearching, setBucketSearching] = useState(false)
+  const [bucketPoiMonth, setBucketPoiMonth] = useState(0)
+  const [bucketPoiYear, setBucketPoiYear] = useState(0)
+  const [bucketTab, setBucketTab] = useState<'stats' | 'bucket'>('stats')
+  const bucketMarkersRef = useRef<any>(null)
+
+  const [atlas_country_search, set_atlas_country_search] = useState('')
+  const [atlas_country_results, set_atlas_country_results] = useState<{ code: string; label: string }[]>([])
+  const [atlas_country_open, set_atlas_country_open] = useState(false)
+
+  const atlas_country_options = useMemo(() => {
+    if (!geoData) return []
+    const opts: { code: string; label: string }[] = []
+    const seen = new Set<string>()
+    for (const f of (geoData as any).features || []) {
+      const a2 = f?.properties?.ISO_A2
+      if (!a2 || a2 === '-99' || typeof a2 !== 'string' || a2.length !== 2) continue
+      if (seen.has(a2)) continue
+      seen.add(a2)
+      const label = String(resolveName(a2) || f?.properties?.NAME || f?.properties?.ADMIN || a2)
+      opts.push({ code: a2, label })
+    }
+    opts.sort((a, b) => a.label.localeCompare(b.label))
+    return opts
+  }, [geoData, resolveName])
+
+  // Load atlas data + bucket list
   useEffect(() => {
-    apiClient.get('/addons/atlas/stats').then(r => {
-      setData(r.data)
+    Promise.all([
+      apiClient.get('/addons/atlas/stats'),
+      apiClient.get('/addons/atlas/bucket-list'),
+    ]).then(([statsRes, bucketRes]) => {
+      setData(statsRes.data)
+      setBucketList(bucketRes.data.items || [])
       setLoading(false)
     }).catch(() => setLoading(false))
   }, [])
 
   // Load GeoJSON world data (direct GeoJSON, no conversion needed)
   useEffect(() => {
-    fetch('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson')
+    fetch('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_countries.geojson')
       .then(r => r.json())
-      .then(geo => setGeoData(geo))
+      .then(geo => {
+        // Dynamically build A2→A3 mapping from GeoJSON
+        for (const f of geo.features) {
+          const a2 = f.properties?.ISO_A2
+          const a3 = f.properties?.ADM0_A3 || f.properties?.ISO_A3
+          if (a2 && a3 && a2 !== '-99' && a3 !== '-99' && !A2_TO_A3[a2]) {
+            A2_TO_A3[a2] = a3
+          }
+        }
+        setGeoData(geo)
+      })
       .catch(() => {})
   }, [])
 
@@ -197,8 +252,7 @@ export default function AtlasPage(): React.ReactElement {
       updateWhenIdle: false,
       tileSize: 256,
       zoomOffset: 0,
-      crossOrigin: true,
-      loading: true,
+      crossOrigin: true
     }).addTo(map)
 
     // Preload adjacent zoom level tiles
@@ -222,6 +276,10 @@ export default function AtlasPage(): React.ReactElement {
     const countryMap = {}
     data.countries.forEach(c => { if (A2_TO_A3[c.code]) countryMap[A2_TO_A3[c.code]] = c })
 
+    // Preserve current map view
+    const currentCenter = mapInstance.current.getCenter()
+    const currentZoom = mapInstance.current.getZoom()
+
     if (geoLayerRef.current) {
       mapInstance.current.removeLayer(geoLayerRef.current)
     }
@@ -241,7 +299,7 @@ export default function AtlasPage(): React.ReactElement {
       interactive: true,
       bubblingMouseEvents: false,
       style: (feature) => {
-        const a3 = feature.properties?.ISO_A3 || feature.properties?.ADM0_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
+        const a3 = feature.properties?.ADM0_A3 || feature.properties?.ISO_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
         const visited = visitedA3.has(a3)
         return {
           fillColor: visited ? colorForCode(a3) : (dark ? '#1e1e2e' : '#e2e8f0'),
@@ -251,11 +309,12 @@ export default function AtlasPage(): React.ReactElement {
         }
       },
       onEachFeature: (feature, layer) => {
-        const a3 = feature.properties?.ISO_A3 || feature.properties?.ADM0_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
+        const a3 = feature.properties?.ADM0_A3 || feature.properties?.ISO_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
         const c = countryMap[a3]
         if (c) {
+          country_layer_by_a2_ref.current[c.code] = layer
           const name = resolveName(c.code)
-          const formatDate = (d) => { if (!d) return '—'; const dt = new Date(d); return dt.toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { month: 'short', year: 'numeric' }) }
+          const formatDate = (d) => { if (!d) return '—'; const dt = new Date(d); return dt.toLocaleDateString(getLocaleForLanguage(language), { month: 'short', year: 'numeric' }) }
           const tooltipHtml = `
             <div style="display:flex;flex-direction:column;gap:8px;min-width:160px">
               <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;padding-bottom:6px;border-bottom:1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}">${name}</div>
@@ -278,18 +337,174 @@ export default function AtlasPage(): React.ReactElement {
           layer.bindTooltip(tooltipHtml, {
             sticky: false, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
           })
-          layer.on('click', () => loadCountryDetail(c.code))
+          layer.on('click', () => {
+            if (c.placeCount === 0 && c.tripCount === 0) {
+              // Manually marked only — show unmark popup
+              handleUnmarkCountry(c.code)
+            } else {
+              loadCountryDetail(c.code)
+            }
+          })
           layer.on('mouseover', (e) => {
             e.target.setStyle({ fillOpacity: 0.9, weight: 2, color: dark ? '#818cf8' : '#4f46e5' })
           })
           layer.on('mouseout', (e) => {
             geoLayerRef.current.resetStyle(e.target)
           })
+        } else {
+          // Unvisited country — allow clicking to mark as visited
+          // Reverse lookup: find A2 code from A3, or use A3 directly
+          const a3ToA2Entry = Object.entries(A2_TO_A3).find(([, v]) => v === a3)
+          const isoA2 = feature.properties?.ISO_A2
+          const countryCode = a3ToA2Entry ? a3ToA2Entry[0] : (isoA2 && isoA2 !== '-99' ? isoA2 : null)
+          if (countryCode && countryCode !== '-99') {
+            country_layer_by_a2_ref.current[countryCode] = layer
+            const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode)
+            layer.bindTooltip(`<div style="font-size:12px;font-weight:600">${name}</div>`, {
+              sticky: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
+            })
+            layer.on('click', () => handleMarkCountry(countryCode, name))
+            layer.on('mouseover', (e) => {
+              e.target.setStyle({ fillOpacity: 0.5, weight: 1.5, color: dark ? '#555' : '#94a3b8' })
+            })
+            layer.on('mouseout', (e) => {
+              geoLayerRef.current.resetStyle(e.target)
+            })
+          }
         }
       }
     }).addTo(mapInstance.current)
+
+    // Restore map view after re-render
+    mapInstance.current.setView(currentCenter, currentZoom, { animate: false })
   }, [geoData, data, dark])
 
+  const handleMarkCountry = (code: string, name: string): void => {
+    setConfirmAction({ type: 'choose', code, name })
+  }
+
+  const handleUnmarkCountry = (code: string): void => {
+    const country = data?.countries.find(c => c.code === code)
+    setConfirmAction({ type: 'unmark', code, name: resolveName(code) })
+  }
+
+  const select_country_from_search = (country_code: string): void => {
+    const country_label = resolveName(country_code)
+    set_atlas_country_search(country_label)
+    set_atlas_country_open(false)
+    set_atlas_country_results([])
+
+    const layer = country_layer_by_a2_ref.current[country_code]
+    try {
+      if (layer?.getBounds && mapInstance.current) {
+        mapInstance.current.fitBounds(layer.getBounds(), { padding: [24, 24], animate: true, maxZoom: 6 })
+      }
+    } catch (e ) { 
+      console.error('Error fitting bounds', e)
+     }
+    setConfirmAction({ type: 'choose', code: country_code, name: country_label })
+  }
+
+  const executeConfirmAction = async (): Promise<void> => {
+    if (!confirmAction) return
+    const { type, code } = confirmAction
+    setConfirmAction(null)
+
+    // Update local state immediately (no API reload = no map re-render flash)
+    if (type === 'mark') {
+      apiClient.post(`/addons/atlas/country/${code}/mark`).catch(() => {})
+      setData(prev => {
+        if (!prev || prev.countries.find(c => c.code === code)) return prev
+        return {
+          ...prev,
+          countries: [...prev.countries, { code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }],
+          stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 },
+        }
+      })
+    } else {
+      apiClient.delete(`/addons/atlas/country/${code}/mark`).catch(() => {})
+      setSelectedCountry(null)
+      setCountryDetail(null)
+      setData(prev => {
+        if (!prev) return prev
+        const c = prev.countries.find(c => c.code === code)
+        if (!c || c.placeCount > 0 || c.tripCount > 0) return prev
+        return {
+          ...prev,
+          countries: prev.countries.filter(c => c.code !== code),
+          stats: { ...prev.stats, totalCountries: Math.max(0, prev.stats.totalCountries - 1) },
+        }
+      })
+    }
+  }
+
+  const handleAddBucketItem = async (): Promise<void> => {
+    if (!bucketForm.name.trim()) return
+    try {
+      const data: Record<string, unknown> = { name: bucketForm.name.trim() }
+      if (bucketForm.notes.trim()) data.notes = bucketForm.notes.trim()
+      if (bucketForm.lat && bucketForm.lng) { data.lat = parseFloat(bucketForm.lat); data.lng = parseFloat(bucketForm.lng) }
+      const targetDate = bucketForm.target_date || (bucketPoiMonth > 0 && bucketPoiYear > 0 ? `${bucketPoiYear}-${String(bucketPoiMonth).padStart(2, '0')}` : null)
+      if (targetDate) data.target_date = targetDate
+      const r = await apiClient.post('/addons/atlas/bucket-list', data)
+      setBucketList(prev => [r.data.item, ...prev])
+      setBucketForm({ name: '', notes: '', lat: '', lng: '', target_date: '' })
+      setBucketSearch(''); setBucketSearchResults([]); setBucketPoiMonth(0); setBucketPoiYear(0)
+      setShowBucketAdd(false)
+    } catch { /* */ }
+  }
+
+  const handleDeleteBucketItem = async (id: number): Promise<void> => {
+    try {
+      await apiClient.delete(`/addons/atlas/bucket-list/${id}`)
+      setBucketList(prev => prev.filter(i => i.id !== id))
+    } catch { /* */ }
+  }
+
+  const handleBucketPoiSearch = async () => {
+    if (!bucketSearch.trim()) return
+    setBucketSearching(true)
+    try {
+      const result = await mapsApi.search(bucketSearch, language)
+      setBucketSearchResults(result.places || [])
+    } catch {} finally { setBucketSearching(false) }
+  }
+
+  const handleSelectBucketPoi = (result: any) => {
+    const targetDate = bucketPoiMonth > 0 && bucketPoiYear > 0 ? `${bucketPoiYear}-${String(bucketPoiMonth).padStart(2, '0')}` : null
+    setBucketForm({
+      name: result.name || bucketSearch,
+      notes: '',
+      lat: String(result.lat || ''),
+      lng: String(result.lng || ''),
+      target_date: targetDate || '',
+    })
+    setBucketSearchResults([])
+    setBucketSearch('')
+  }
+
+  // Render bucket list markers on map
+  useEffect(() => {
+    if (!mapInstance.current) return
+    if (bucketMarkersRef.current) {
+      mapInstance.current.removeLayer(bucketMarkersRef.current)
+    }
+    if (bucketList.length === 0) return
+    const markers = bucketList.filter(b => b.lat && b.lng).map(b => {
+      const icon = L.divIcon({
+        className: '',
+        html: `<div style="width:28px;height:28px;border-radius:50%;background:rgba(251,191,36,0.9);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.3);border:2px solid white"><svg width="14" height="14" viewBox="0 0 24 24" fill="white" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>`,
+        iconSize: [28, 28],
+        iconAnchor: [14, 14],
+      })
+      return L.marker([b.lat!, b.lng!], { icon }).bindTooltip(
+        `<div style="font-size:12px;font-weight:600">${b.name}</div>${b.notes ? `<div style="font-size:10px;opacity:0.7;margin-top:2px">${b.notes}</div>` : ''}`,
+        { className: 'atlas-tooltip', direction: 'top', offset: [0, -14] }
+      )
+    })
+    bucketMarkersRef.current = L.layerGroup(markers).addTo(mapInstance.current)
+  }, [bucketList])
+
   const loadCountryDetail = async (code: string): Promise<void> => {
     setSelectedCountry(code)
     try {
@@ -318,6 +533,129 @@ export default function AtlasPage(): React.ReactElement {
       <div style={{ position: 'fixed', top: 'var(--nav-h)', left: 0, right: 0, bottom: 0 }}>
         {/* Map */}
         <div ref={mapRef} style={{ position: 'absolute', inset: 0, zIndex: 1, background: dark ? '#1a1a2e' : '#f0f0f0' }} />
+        <div
+          className="absolute z-20 flex justify-center"
+          style={{ top: 14, left: 0, right: 0, pointerEvents: 'none' }}
+        >
+          <div style={{ width: 'min(520px, calc(100vw - 28px))', pointerEvents: 'auto' }}>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              padding: '10px 12px',
+              borderRadius: 16,
+              border: '1px solid ' + (dark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.08)'),
+              background: dark ? 'rgba(10,10,15,0.55)' : 'rgba(255,255,255,0.55)',
+              backdropFilter: 'blur(18px) saturate(180%)',
+              WebkitBackdropFilter: 'blur(18px) saturate(180%)',
+              boxShadow: dark ? '0 8px 26px rgba(0,0,0,0.25)' : '0 8px 26px rgba(0,0,0,0.10)',
+            }}>
+              <Search size={16} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+              <input
+                value={atlas_country_search}
+                onChange={(e) => {
+                  const raw = e.target.value
+                  set_atlas_country_search(raw)
+                  const q = raw.trim().toLowerCase()
+                  if (!q) {
+                    set_atlas_country_results([])
+                    set_atlas_country_open(false)
+                    return
+                  }
+                  const results = atlas_country_options
+                    .filter(o => o.label.toLowerCase().includes(q) || o.code.toLowerCase() === q)
+                    .slice(0, 8)
+                  set_atlas_country_results(results)
+                  set_atlas_country_open(true)
+                }}
+                onFocus={() => {
+                  if (atlas_country_results.length > 0) set_atlas_country_open(true)
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Escape') {
+                    set_atlas_country_open(false)
+                    return
+                  }
+                  if (e.key === 'Enter') {
+                    const first = atlas_country_results[0]
+                    if (first) select_country_from_search(first.code)
+                  }
+                }}
+                placeholder={t('atlas.searchCountry')}
+                autoComplete="off"
+                spellCheck={false}
+                style={{
+                  flex: 1,
+                  border: 'none',
+                  outline: 'none',
+                  background: 'transparent',
+                  fontSize: 13,
+                  fontFamily: 'inherit',
+                  color: 'var(--text-primary)',
+                }}
+              />
+              {atlas_country_search.trim() && (
+                <button
+                  onClick={() => {
+                    set_atlas_country_search('')
+                    set_atlas_country_results([])
+                    set_atlas_country_open(false)
+                  }}
+                  style={{ border: 'none', background: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}
+                  aria-label="Clear"
+                >
+                  <X size={14} />
+                </button>
+              )}
+            </div>
+
+            {atlas_country_open && atlas_country_results.length > 0 && (
+              <div
+                style={{
+                  marginTop: 8,
+                  borderRadius: 14,
+                  overflow: 'hidden',
+                  border: '1px solid ' + (dark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.08)'),
+                  background: dark ? 'rgba(10,10,15,0.75)' : 'rgba(255,255,255,0.75)',
+                  backdropFilter: 'blur(18px) saturate(180%)',
+                  WebkitBackdropFilter: 'blur(18px) saturate(180%)',
+                  boxShadow: dark ? '0 12px 30px rgba(0,0,0,0.35)' : '0 12px 30px rgba(0,0,0,0.12)',
+                }}
+                onMouseLeave={() => set_atlas_country_open(false)}
+              >
+                {atlas_country_results.map((r) => (
+                  <button
+                    key={r.code}
+                    onClick={() => select_country_from_search(r.code)}
+                    style={{
+                      width: '100%',
+                      border: 'none',
+                      background: 'transparent',
+                      cursor: 'pointer',
+                      padding: '10px 12px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      fontFamily: 'inherit',
+                      textAlign: 'left',
+                      borderBottom: '1px solid ' + (dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'),
+                    }}
+                    onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)' }}
+                    onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'transparent' }}
+                  >
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+                      <img src={`https://flagcdn.com/w40/${r.code.toLowerCase()}.png`} alt={r.code} style={{ width: 28, height: 20, borderRadius: 4, objectFit: 'cover' }} />
+                      <span style={{ fontSize: 13, fontWeight: 650, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {r.label}
+                      </span>
+                    </span>
+                    <ChevronRight size={16} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
 
         {/* Mobile: Bottom bar */}
         <div className="md:hidden absolute bottom-3 left-0 right-0 z-10 flex justify-center" style={{ touchAction: 'manipulation' }}>
@@ -348,6 +686,7 @@ export default function AtlasPage(): React.ReactElement {
             left: '50%',
             transform: 'translateX(-50%)',
             width: 'fit-content',
+            maxWidth: 'calc(100vw - 40px)',
             background: dark ? 'rgba(10,10,15,0.55)' : 'rgba(255,255,255,0.2)',
             backdropFilter: 'blur(24px) saturate(180%)',
             WebkitBackdropFilter: 'blur(24px) saturate(180%)',
@@ -368,13 +707,152 @@ export default function AtlasPage(): React.ReactElement {
           <SidebarContent
             data={data} stats={stats} countries={countries} selectedCountry={selectedCountry}
             countryDetail={countryDetail} resolveName={resolveName}
-            onCountryClick={loadCountryDetail} onTripClick={(id) => navigate(`/trips/${id}`)}
+            onCountryClick={loadCountryDetail} onTripClick={(id) => navigate(`/trips/${id}`)} onUnmarkCountry={handleUnmarkCountry}
+            bucketList={bucketList} bucketTab={bucketTab} setBucketTab={setBucketTab}
+            showBucketAdd={showBucketAdd} setShowBucketAdd={setShowBucketAdd}
+            bucketForm={bucketForm} setBucketForm={setBucketForm}
+            onAddBucket={handleAddBucketItem} onDeleteBucket={handleDeleteBucketItem}
+            onSearchBucket={handleBucketPoiSearch} onSelectBucketPoi={handleSelectBucketPoi}
+            bucketSearchResults={bucketSearchResults} setBucketSearchResults={setBucketSearchResults} bucketPoiMonth={bucketPoiMonth} setBucketPoiMonth={setBucketPoiMonth}
+            bucketPoiYear={bucketPoiYear} setBucketPoiYear={setBucketPoiYear} bucketSearching={bucketSearching}
+            bucketSearch={bucketSearch} setBucketSearch={setBucketSearch}
             t={t} dark={dark}
           />
         </div>
 
-
       </div>
+
+      {/* Country action popup */}
+      {confirmAction && (
+        <div style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
+          onClick={() => setConfirmAction(null)}>
+          <div style={{ background: 'var(--bg-card)', borderRadius: 16, padding: 24, maxWidth: 340, width: '100%', boxShadow: '0 16px 48px rgba(0,0,0,0.2)', textAlign: 'center' }}
+            onClick={e => e.stopPropagation()}>
+            {confirmAction.code.length === 2 ? (
+              <img src={`https://flagcdn.com/w80/${confirmAction.code.toLowerCase()}.png`} alt={confirmAction.code} style={{ width: 48, height: 34, borderRadius: 6, objectFit: 'cover', marginBottom: 12, display: 'inline-block' }} />
+            ) : (
+              <div style={{ fontSize: 36, marginBottom: 12 }}>{countryCodeToFlag(confirmAction.code)}</div>
+            )}
+            <h3 style={{ margin: '0 0 16px', fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{confirmAction.name}</h3>
+
+            {confirmAction.type === 'choose' && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                <button onClick={async () => {
+                  try {
+                    await apiClient.post(`/addons/atlas/country/${confirmAction.code}/mark`)
+                    setData(prev => {
+                      if (!prev || prev.countries.find(c => c.code === confirmAction.code)) return prev
+                      return { ...prev, countries: [...prev.countries, { code: confirmAction.code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 } }
+                    })
+                  } catch {}
+                  setConfirmAction(null)
+                }}
+                  style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '12px 16px', borderRadius: 12, border: '1px solid var(--border-primary)', background: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', transition: 'background 0.12s' }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+                  <MapPin size={18} style={{ color: 'var(--text-primary)', flexShrink: 0 }} />
+                  <div>
+                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{t('atlas.markVisited')}</div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 1 }}>{t('atlas.markVisitedHint')}</div>
+                  </div>
+                </button>
+                <button onClick={() => setConfirmAction({ ...confirmAction, type: 'bucket' as any })}
+                  style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '12px 16px', borderRadius: 12, border: '1px solid var(--border-primary)', background: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', transition: 'background 0.12s' }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+                  <Star size={18} style={{ color: '#fbbf24', flexShrink: 0 }} />
+                  <div>
+                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{t('atlas.addToBucket')}</div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 1 }}>{t('atlas.addToBucketHint')}</div>
+                  </div>
+                </button>
+              </div>
+            )}
+
+            {confirmAction.type === 'unmark' && (
+              <>
+                <p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-muted)' }}>{t('atlas.confirmUnmark')}</p>
+                <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
+                  <button onClick={() => setConfirmAction(null)}
+                    style={{ padding: '8px 20px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+                    {t('common.cancel')}
+                  </button>
+                  <button onClick={executeConfirmAction}
+                    style={{ padding: '8px 20px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: '#ef4444', color: 'white' }}>
+                    {t('atlas.unmark')}
+                  </button>
+                </div>
+              </>
+            )}
+
+            {confirmAction.type === 'bucket' && (
+              <>
+                <p style={{ margin: '0 0 14px', fontSize: 13, color: 'var(--text-muted)' }}>{t('atlas.bucketWhen')}</p>
+                <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 16 }}>
+                  <div style={{ flex: 1 }}>
+                    <CustomSelect
+                      value={String(bucketMonth)}
+                      onChange={v => setBucketMonth(Number(v))}
+                      placeholder={t('atlas.month')}
+                      options={[
+                        { value: '0', label: '—' },
+                        ...Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: new Date(2000, i).toLocaleString(language, { month: 'long' }) })),
+                      ]}
+                      size="sm"
+                    />
+                  </div>
+                  <div style={{ flex: 1 }}>
+                    <CustomSelect
+                      value={String(bucketYear)}
+                      onChange={v => setBucketYear(Number(v))}
+                      placeholder={t('atlas.year')}
+                      options={[
+                        { value: '0', label: '—' },
+                        ...Array.from({ length: 20 }, (_, i) => ({ value: String(new Date().getFullYear() + i), label: String(new Date().getFullYear() + i) })),
+                      ]}
+                      size="sm"
+                    />
+                  </div>
+                </div>
+                <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
+                  <button onClick={() => setConfirmAction({ ...confirmAction, type: 'choose' })}
+                    style={{ padding: '8px 20px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+                    {t('common.back')}
+                  </button>
+                  <button onClick={async () => {
+                    const targetDate = bucketMonth > 0 && bucketYear > 0 ? `${bucketYear}-${String(bucketMonth).padStart(2, '0')}` : null
+                    try {
+                      const r = await apiClient.post('/addons/atlas/bucket-list', { name: confirmAction.name, country_code: confirmAction.code, target_date: targetDate })
+                      setBucketList(prev => [r.data.item, ...prev])
+                    } catch {}
+                    setBucketMonth(0); setBucketYear(0)
+                    setConfirmAction(null)
+                  }}
+                    style={{ padding: '8px 20px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: '#fbbf24', color: '#1a1a1a' }}>
+                    {t('atlas.addToBucket')}
+                  </button>
+                </div>
+              </>
+            )}
+
+            {confirmAction.type === 'mark' && (
+              <>
+                <p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-muted)' }}>{t('atlas.confirmMark')}</p>
+                <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
+                  <button onClick={() => setConfirmAction(null)}
+                    style={{ padding: '8px 20px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+                    {t('common.cancel')}
+                  </button>
+                  <button onClick={executeConfirmAction}
+                    style={{ padding: '8px 20px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: 'var(--text-primary)', color: 'white' }}>
+                    {t('atlas.markVisited')}
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   )
 }
@@ -388,11 +866,33 @@ interface SidebarContentProps {
   resolveName: (code: string) => string
   onCountryClick: (code: string) => void
   onTripClick: (id: number) => void
+  onUnmarkCountry?: (code: string) => void
+  bucketList: any[]
+  bucketTab: 'stats' | 'bucket'
+  setBucketTab: (tab: 'stats' | 'bucket') => void
+  showBucketAdd: boolean
+  setShowBucketAdd: (v: boolean) => void
+  bucketForm: { name: string; notes: string; lat: string; lng: string; target_date: string }
+  setBucketForm: (f: { name: string; notes: string; lat: string; lng: string; target_date: string }) => void
+  onAddBucket: () => Promise<void>
+  onDeleteBucket: (id: number) => Promise<void>
+  onSearchBucket: () => Promise<void>
+  onSelectBucketPoi: (result: any) => void
+  bucketSearchResults: any[]
+  setBucketSearchResults: (v: string[]) => void
+  bucketPoiMonth: number
+  setBucketPoiMonth: (v: number) => void
+  bucketPoiYear: number
+  setBucketPoiYear: (v: number) => void
+  bucketSearching: boolean
+  bucketSearch: string
+  setBucketSearch: (v: string) => void
   t: TranslationFn
   dark: boolean
 }
 
-function SidebarContent({ data, stats, countries, selectedCountry, countryDetail, resolveName, onCountryClick, onTripClick, t, dark }: SidebarContentProps): React.ReactElement {
+function SidebarContent({ data, stats, countries, selectedCountry, countryDetail, resolveName, onTripClick, onUnmarkCountry, bucketList, bucketTab, setBucketTab, showBucketAdd, setShowBucketAdd, bucketForm, setBucketForm, onAddBucket, onDeleteBucket, onSearchBucket, onSelectBucketPoi, bucketSearchResults, setBucketSearchResults, bucketPoiMonth, setBucketPoiMonth, bucketPoiYear, setBucketPoiYear, bucketSearching, bucketSearch, setBucketSearch, t, dark }: SidebarContentProps): React.ReactElement {
+  const { language } = useTranslation()
   const bg = (o) => dark ? `rgba(255,255,255,${o})` : `rgba(0,0,0,${o})`
   const tp = dark ? '#f1f5f9' : '#0f172a'
   const tm = dark ? '#94a3b8' : '#64748b'
@@ -405,20 +905,154 @@ function SidebarContent({ data, stats, countries, selectedCountry, countryDetail
   const CL = { 'Europe': t('atlas.europe'), 'Asia': t('atlas.asia'), 'North America': t('atlas.northAmerica'), 'South America': t('atlas.southAmerica'), 'Africa': t('atlas.africa'), 'Oceania': t('atlas.oceania') }
   const contColors = ['#818cf8', '#f472b6', '#34d399', '#fbbf24', '#fb923c', '#22d3ee']
 
-  if (countries.length === 0 && !lastTrip) {
+  // Tab switcher
+  const tabBar = (
+    <div style={{ display: 'flex', gap: 4, padding: '12px 16px 0', marginBottom: 4 }}>
+      {[{ id: 'stats', label: t('atlas.statsTab'), icon: Globe }, { id: 'bucket', label: t('atlas.bucketTab'), icon: Star }].map(tab => (
+        <button key={tab.id} onClick={() => setBucketTab(tab.id as any)}
+          style={{
+            flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+            padding: '7px 0', borderRadius: 10, border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+            fontSize: 12, fontWeight: 600, transition: 'all 0.15s',
+            background: bucketTab === tab.id ? bg(0.1) : 'transparent',
+            color: bucketTab === tab.id ? tp : tf,
+          }}>
+          <tab.icon size={13} />
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  )
+
+  if (countries.length === 0 && !lastTrip && bucketTab !== 'bucket') {
     return (
-      <div className="p-8 text-center">
-        <Globe size={28} className="mx-auto mb-2" style={{ color: tf, opacity: 0.4 }} />
-        <p className="text-sm font-medium" style={{ color: tm }}>{t('atlas.noData')}</p>
-        <p className="text-xs mt-1" style={{ color: tf }}>{t('atlas.noDataHint')}</p>
-      </div>
+      <>
+        {tabBar}
+        <div className="p-8 text-center">
+          <Globe size={28} className="mx-auto mb-2" style={{ color: tf, opacity: 0.4 }} />
+          <p className="text-sm font-medium" style={{ color: tm }}>{t('atlas.noData')}</p>
+          <p className="text-xs mt-1" style={{ color: tf }}>{t('atlas.noDataHint')}</p>
+        </div>
+      </>
     )
   }
 
   const thisYear = new Date().getFullYear()
   const divider = `2px solid ${bg(0.08)}`
 
+  // Bucket list content
+  const bucketContent = (
+    <>
+    <div className="flex items-stretch" style={{ overflowX: 'auto', padding: '0 8px' }}>
+      {bucketList.map(item => (
+        <div key={item.id} className="group flex flex-col items-center justify-center shrink-0" style={{ padding: '8px 14px', position: 'relative', minWidth: 80 }}>
+          {(() => {
+            const code = item.country_code?.length === 2 ? item.country_code : (Object.entries(A2_TO_A3).find(([, v]) => v === item.country_code)?.[0] || '')
+            return code ? (
+              <img src={`https://flagcdn.com/w40/${code.toLowerCase()}.png`} alt={code} style={{ width: 28, height: 20, borderRadius: 4, objectFit: 'cover', marginBottom: 4 }} />
+            ) : <Star size={16} style={{ color: '#fbbf24', marginBottom: 4 }} fill="#fbbf24" />
+          })()}
+          <span className="text-xs font-semibold text-center leading-tight" style={{ color: tp, maxWidth: 90, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</span>
+          {item.target_date && (() => {
+            const [y, m] = item.target_date.split('-')
+            const label = m ? new Date(Number(y), Number(m) - 1).toLocaleString(language, { month: 'short', year: 'numeric' }) : y
+            return <span className="text-[9px] mt-0.5 text-center" style={{ color: tf }}>{label}</span>
+          })()}
+          {!item.target_date && item.notes && <span className="text-[9px] mt-0.5 text-center" style={{ color: tf, maxWidth: 90, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.notes}</span>}
+          <button onClick={() => onDeleteBucket(item.id)}
+            className="opacity-0 group-hover:opacity-100"
+            style={{ position: 'absolute', top: 4, right: 4, background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: tf, display: 'flex', transition: 'opacity 0.15s' }}>
+            <X size={10} />
+          </button>
+        </div>
+      ))}
+      {bucketList.length === 0 && !showBucketAdd && (
+        <div className="flex items-center justify-center py-4 px-6" style={{ color: tf, fontSize: 12 }}>
+          {t('atlas.bucketEmptyHint')}
+        </div>
+      )}
+    </div>
+    {showBucketAdd ? (
+      <div style={{ padding: '8px 16px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {/* Search or manual name */}
+        <div style={{ position: 'relative' }}>
+          <div style={{ display: 'flex', gap: 4 }}>
+            <input type="text" value={bucketForm.name || bucketSearch}
+              onChange={e => { const v = e.target.value; if (bucketForm.name) setBucketForm({ ...bucketForm, name: v }); else setBucketSearch(v) }}
+              onKeyDown={e => { if (e.key === 'Enter' && !bucketForm.name) onSearchBucket(); else if (e.key === 'Enter') onAddBucket(); if (e.key === 'Escape') setShowBucketAdd(false) }}
+              placeholder={t('atlas.bucketNamePlaceholder')}
+              autoFocus
+              style={{ flex: 1, padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-primary)', fontSize: 12, fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)', background: 'var(--bg-input)' }}
+            />
+            {!bucketForm.name && (
+              <button onClick={onSearchBucket} disabled={bucketSearching}
+                style={{ padding: '6px 10px', borderRadius: 8, border: 'none', background: 'var(--accent)', color: 'var(--accent-text)', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+                <Search size={12} />
+              </button>
+            )}
+            {bucketForm.name && (
+              <button onClick={() => { setBucketForm({ ...bucketForm, name: '', lat: '', lng: '' }); setBucketSearch('') }}
+                style={{ padding: '6px 8px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'var(--text-faint)' }}>
+                <X size={12} />
+              </button>
+            )}
+          </div>
+          {bucketSearchResults.length > 0 && (
+            <div style={{ position: 'absolute', bottom: '100%', left: 0, right: 0, zIndex: 50, marginBottom: 4, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.12)', maxHeight: 160, overflowY: 'auto' }}>
+              {bucketSearchResults.slice(0, 6).map((r, i) => (
+                <button key={i} onClick={() => onSelectBucketPoi(r)} style={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%', padding: '6px 10px', border: 'none', background: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', borderBottom: '1px solid var(--border-faint)' }}>
+                  <span style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-primary)' }}>{r.name}</span>
+                  {r.address && <span style={{ fontSize: 10, color: 'var(--text-faint)' }}>{r.address}</span>}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        {/* Selected place indicator */}
+        {bucketForm.lat && bucketForm.lng && (
+          <div style={{ fontSize: 10, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', gap: 4 }}>
+            <MapPin size={10} /> {Number(bucketForm.lat).toFixed(4)}, {Number(bucketForm.lng).toFixed(4)}
+          </div>
+        )}
+        {/* Month / Year with CustomSelect */}
+        <div style={{ display: 'flex', gap: 6 }}>
+          <div style={{ flex: 1 }}>
+            <CustomSelect value={String(bucketPoiMonth)} onChange={v => setBucketPoiMonth(Number(v))} placeholder={t('atlas.month')} size="sm"
+              options={[{ value: '0', label: '—' }, ...Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: new Date(2000, i).toLocaleString(language, { month: 'short' }) }))]} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <CustomSelect value={String(bucketPoiYear)} onChange={v => setBucketPoiYear(Number(v))} placeholder={t('atlas.year')} size="sm"
+              options={[{ value: '0', label: '—' }, ...Array.from({ length: 20 }, (_, i) => ({ value: String(new Date().getFullYear() + i), label: String(new Date().getFullYear() + i) }))]} />
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
+          <button onClick={() => { setShowBucketAdd(false); setBucketForm({ name: '', notes: '', lat: '', lng: '', target_date: '' }); setBucketSearch(''); setBucketSearchResults([]); setBucketPoiMonth(0); setBucketPoiYear(0) }}
+            style={{ fontSize: 11, padding: '4px 10px', borderRadius: 6, border: '1px solid var(--border-primary)', background: 'none', cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button onClick={onAddBucket} disabled={!bucketForm.name.trim()}
+            style={{ fontSize: 11, padding: '4px 12px', borderRadius: 6, border: 'none', background: '#fbbf24', color: '#1a1a1a', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: bucketForm.name.trim() ? 1 : 0.5 }}>
+            {t('common.add')}
+          </button>
+        </div>
+      </div>
+    ) : (
+      <div style={{ padding: '4px 16px 8px' }}>
+        <button onClick={() => setShowBucketAdd(true)}
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, width: '100%', padding: '5px 0', borderRadius: 8, border: '1px dashed var(--border-primary)', background: 'none', fontSize: 11, color: tf, cursor: 'pointer', fontFamily: 'inherit' }}>
+          <Plus size={11} /> {t('atlas.addPoi')}
+        </button>
+      </div>
+    )}
+    </>
+  )
+
   return (
+    <>
+    {tabBar}
+    {/* Both tabs always rendered so the wider one sets the panel width */}
+    <div style={{ display: 'grid' }}>
+    <div style={bucketTab === 'bucket' ? { visibility: 'hidden' as const, gridArea: '1/1' } : { gridArea: '1/1' }}>
     <div className="flex items-stretch justify-center">
 
       {/* ═══ SECTION 1: Numbers ═══ */}
@@ -507,12 +1141,25 @@ function SidebarContent({ data, stats, countries, selectedCountry, countryDetail
                     {trip.title}
                   </button>
                 ))}
+                {countryDetail.manually_marked && onUnmarkCountry && (
+                  <button onClick={() => onUnmarkCountry(selectedCountry!)}
+                    className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold transition-opacity hover:opacity-75"
+                    style={{ background: 'rgba(239,68,68,0.1)', color: '#ef4444' }}>
+                    <X size={9} />
+                    {t('atlas.unmark')}
+                  </button>
+                )}
               </div>
             </div>
           </div>
         </>
       )}
     </div>
+    </div>
+    <div style={bucketTab === 'stats' ? { visibility: 'hidden' as const, gridArea: '1/1' } : { gridArea: '1/1' }}>
+      {bucketContent}
+    </div>
+    </div>
+    </>
   )
 }
-

client/src/pages/DashboardPage.tsx

@@ -10,11 +10,14 @@ import DemoBanner from '../components/Layout/DemoBanner'
 import CurrencyWidget from '../components/Dashboard/CurrencyWidget'
 import TimezoneWidget from '../components/Dashboard/TimezoneWidget'
 import TripFormModal from '../components/Trips/TripFormModal'
+import ConfirmDialog from '../components/shared/ConfirmDialog'
 import { useToast } from '../components/shared/Toast'
 import {
   Plus, Calendar, Trash2, Edit2, Map, ChevronDown, ChevronUp,
   Archive, ArchiveRestore, Clock, MapPin, Settings, X, ArrowRightLeft,
+  LayoutGrid, List,
 } from 'lucide-react'
+import { useCanDo } from '../store/permissionsStore'
 
 interface DashboardTrip {
   id: number
@@ -53,12 +56,12 @@ function getTripStatus(trip: DashboardTrip): string | null {
   return 'past'
 }
 
-function formatDate(dateStr: string | null | undefined, locale: string = 'de-DE'): string | null {
+function formatDate(dateStr: string | null | undefined, locale: string = 'en-US'): string | null {
   if (!dateStr) return null
   return new Date(dateStr + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' })
 }
 
-function formatDateShort(dateStr: string | null | undefined, locale: string = 'de-DE'): string | null {
+function formatDateShort(dateStr: string | null | undefined, locale: string = 'en-US'): string | null {
   if (!dateStr) return null
   return new Date(dateStr + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short' })
 }
@@ -137,9 +140,9 @@ function LiquidGlass({ children, dark, style, className = '', onClick }: LiquidG
 // ── Spotlight Card (next upcoming trip) ─────────────────────────────────────
 interface TripCardProps {
   trip: DashboardTrip
-  onEdit: (trip: DashboardTrip) => void
-  onDelete: (trip: DashboardTrip) => void
-  onArchive: (id: number) => void
+  onEdit?: (trip: DashboardTrip) => void
+  onDelete?: (trip: DashboardTrip) => void
+  onArchive?: (id: number) => void
   onClick: (trip: DashboardTrip) => void
   t: (key: string, params?: Record<string, string | number | null>) => string
   locale: string
@@ -185,12 +188,14 @@ function SpotlightCard({ trip, onEdit, onDelete, onArchive, onClick, t, locale,
         </div>
 
         {/* Top-right actions */}
+        {(onEdit || onArchive || onDelete) && (
         <div style={{ position: 'absolute', top: 16, right: 16, display: 'flex', gap: 6 }}
           onClick={e => e.stopPropagation()}>
-          <IconBtn onClick={() => onEdit(trip)} title={t('common.edit')}><Edit2 size={14} /></IconBtn>
-          <IconBtn onClick={() => onArchive(trip.id)} title={t('dashboard.archive')}><Archive size={14} /></IconBtn>
-          <IconBtn onClick={() => onDelete(trip)} title={t('common.delete')} danger><Trash2 size={14} /></IconBtn>
+          {onEdit && <IconBtn onClick={() => onEdit(trip)} title={t('common.edit')}><Edit2 size={14} /></IconBtn>}
+          {onArchive && <IconBtn onClick={() => onArchive(trip.id)} title={t('dashboard.archive')}><Archive size={14} /></IconBtn>}
+          {onDelete && <IconBtn onClick={() => onDelete(trip)} title={t('common.delete')} danger><Trash2 size={14} /></IconBtn>}
         </div>
+        )}
 
         {/* Bottom content */}
         <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '20px 24px' }}>
@@ -304,13 +309,113 @@ function TripCard({ trip, onEdit, onDelete, onArchive, onClick, t, locale }: Omi
           <Stat label={t('dashboard.places')} value={trip.place_count || 0} />
         </div>
 
+        {(onEdit || onArchive || onDelete) && (
         <div style={{ display: 'flex', gap: 6, borderTop: '1px solid #f3f4f6', paddingTop: 10 }}
           onClick={e => e.stopPropagation()}>
-          <CardAction onClick={() => onEdit(trip)} icon={<Edit2 size={12} />} label={t('common.edit')} />
-          <CardAction onClick={() => onArchive(trip.id)} icon={<Archive size={12} />} label={t('dashboard.archive')} />
-          <CardAction onClick={() => onDelete(trip)} icon={<Trash2 size={12} />} label={t('common.delete')} danger />
+          {onEdit && <CardAction onClick={() => onEdit(trip)} icon={<Edit2 size={12} />} label={t('common.edit')} />}
+          {onArchive && <CardAction onClick={() => onArchive(trip.id)} icon={<Archive size={12} />} label={t('dashboard.archive')} />}
+          {onDelete && <CardAction onClick={() => onDelete(trip)} icon={<Trash2 size={12} />} label={t('common.delete')} danger />}
+        </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ── List View Item ──────────────────────────────────────────────────────────
+function TripListItem({ trip, onEdit, onDelete, onArchive, onClick, t, locale }: Omit<TripCardProps, 'dark'>): React.ReactElement {
+  const status = getTripStatus(trip)
+  const [hovered, setHovered] = useState(false)
+
+  const coverBg = trip.cover_image
+    ? `url(${trip.cover_image}) center/cover no-repeat`
+    : tripGradient(trip.id)
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={() => onClick(trip)}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 14, padding: '10px 16px',
+        background: hovered ? 'var(--bg-tertiary)' : 'var(--bg-card)', borderRadius: 14,
+        border: `1px solid ${hovered ? 'var(--text-faint)' : 'var(--border-primary)'}`,
+        cursor: 'pointer', transition: 'all 0.15s',
+        boxShadow: hovered ? '0 4px 16px rgba(0,0,0,0.08)' : '0 1px 3px rgba(0,0,0,0.03)',
+      }}
+    >
+      {/* Cover thumbnail */}
+      <div style={{
+        width: 52, height: 52, borderRadius: 12, flexShrink: 0,
+        background: coverBg, position: 'relative', overflow: 'hidden',
+      }}>
+        {status === 'ongoing' && (
+          <span style={{
+            position: 'absolute', top: 4, left: 4,
+            width: 7, height: 7, borderRadius: '50%', background: '#ef4444',
+            animation: 'blink 1s ease-in-out infinite',
+          }} />
+        )}
+      </div>
+
+      {/* Title & description */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {trip.title}
+          </span>
+          {!trip.is_owner && (
+            <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', background: 'var(--bg-tertiary)', padding: '1px 6px', borderRadius: 99, whiteSpace: 'nowrap', flexShrink: 0 }}>
+              {t('dashboard.shared')}
+            </span>
+          )}
+          {status && (
+            <span style={{
+              fontSize: 10, fontWeight: 700, padding: '1px 8px', borderRadius: 99,
+              background: status === 'ongoing' ? 'rgba(239,68,68,0.1)' : 'var(--bg-tertiary)',
+              color: status === 'ongoing' ? '#ef4444' : 'var(--text-muted)',
+              whiteSpace: 'nowrap', flexShrink: 0,
+            }}>
+              {status === 'ongoing' ? t('dashboard.status.ongoing')
+                : status === 'today' ? t('dashboard.status.today')
+                : status === 'tomorrow' ? t('dashboard.status.tomorrow')
+                : status === 'future' ? t('dashboard.status.daysLeft', { count: daysUntil(trip.start_date) })
+                : t('dashboard.status.past')}
+            </span>
+          )}
+        </div>
+        {trip.description && (
+          <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {trip.description}
+          </p>
+        )}
+      </div>
+
+      {/* Date & stats */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0 }}>
+        {trip.start_date && (
+          <div className="hidden sm:flex" style={{ alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)' }}>
+            <Calendar size={11} />
+            {formatDateShort(trip.start_date, locale)}
+            {trip.end_date && <> — {formatDateShort(trip.end_date, locale)}</>}
+          </div>
+        )}
+        <div className="hidden md:flex" style={{ alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)' }}>
+          <Clock size={11} /> {trip.day_count || 0}
+        </div>
+        <div className="hidden md:flex" style={{ alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)' }}>
+          <MapPin size={11} /> {trip.place_count || 0}
         </div>
       </div>
+
+      {/* Actions */}
+      {(onEdit || onArchive || onDelete) && (
+      <div style={{ display: 'flex', gap: 4, flexShrink: 0 }} onClick={e => e.stopPropagation()}>
+        {onEdit && <CardAction onClick={() => onEdit(trip)} icon={<Edit2 size={12} />} label="" />}
+        {onArchive && <CardAction onClick={() => onArchive(trip.id)} icon={<Archive size={12} />} label="" />}
+        {onDelete && <CardAction onClick={() => onDelete(trip)} icon={<Trash2 size={12} />} label="" danger />}
+      </div>
+      )}
     </div>
   )
 }
@@ -318,9 +423,9 @@ function TripCard({ trip, onEdit, onDelete, onArchive, onClick, t, locale }: Omi
 // ── Archived Trip Row ────────────────────────────────────────────────────────
 interface ArchivedRowProps {
   trip: DashboardTrip
-  onEdit: (trip: DashboardTrip) => void
-  onUnarchive: (id: number) => void
-  onDelete: (trip: DashboardTrip) => void
+  onEdit?: (trip: DashboardTrip) => void
+  onUnarchive?: (id: number) => void
+  onDelete?: (trip: DashboardTrip) => void
   onClick: (trip: DashboardTrip) => void
   t: (key: string, params?: Record<string, string | number | null>) => string
   locale: string
@@ -330,11 +435,11 @@ function ArchivedRow({ trip, onEdit, onUnarchive, onDelete, onClick, t, locale }
   return (
     <div onClick={() => onClick(trip)} style={{
       display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px',
-      borderRadius: 12, border: '1px solid #f3f4f6', background: 'white', cursor: 'pointer',
+      borderRadius: 12, border: '1px solid var(--border-faint)', background: 'var(--bg-card)', cursor: 'pointer',
       transition: 'border-color 0.12s',
     }}
-      onMouseEnter={e => e.currentTarget.style.borderColor = '#e5e7eb'}
-      onMouseLeave={e => e.currentTarget.style.borderColor = '#f3f4f6'}>
+      onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border-primary)'}
+      onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border-faint)'}>
       {/* Mini cover */}
       <div style={{
         width: 40, height: 40, borderRadius: 10, flexShrink: 0,
@@ -343,8 +448,8 @@ function ArchivedRow({ trip, onEdit, onUnarchive, onDelete, onClick, t, locale }
       }} />
       <div style={{ flex: 1, minWidth: 0 }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-          <span style={{ fontSize: 13, fontWeight: 600, color: '#6b7280', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{trip.title}</span>
-          {!trip.is_owner && <span style={{ fontSize: 10, color: '#9ca3af', background: '#f3f4f6', padding: '1px 6px', borderRadius: 99, flexShrink: 0 }}>{t('dashboard.shared')}</span>}
+          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{trip.title}</span>
+          {!trip.is_owner && <span style={{ fontSize: 10, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '1px 6px', borderRadius: 99, flexShrink: 0 }}>{t('dashboard.shared')}</span>}
         </div>
         {trip.start_date && (
           <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 1 }}>
@@ -352,18 +457,20 @@ function ArchivedRow({ trip, onEdit, onUnarchive, onDelete, onClick, t, locale }
           </div>
         )}
       </div>
+      {(onEdit || onUnarchive || onDelete) && (
       <div style={{ display: 'flex', gap: 4, flexShrink: 0 }} onClick={e => e.stopPropagation()}>
-        <button onClick={() => onUnarchive(trip.id)} title={t('dashboard.restore')} style={{ padding: '4px 8px', borderRadius: 8, border: '1px solid #e5e7eb', background: 'white', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: '#6b7280' }}
+        {onUnarchive && <button onClick={() => onUnarchive(trip.id)} title={t('dashboard.restore')} style={{ padding: '4px 8px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'var(--bg-card)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-faint)'; e.currentTarget.style.color = 'var(--text-primary)' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#6b7280' }}>
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.color = 'var(--text-muted)' }}>
           <ArchiveRestore size={12} /> {t('dashboard.restore')}
-        </button>
-        <button onClick={() => onDelete(trip)} title={t('common.delete')} style={{ padding: '4px 8px', borderRadius: 8, border: '1px solid #e5e7eb', background: 'white', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: '#9ca3af' }}
+        </button>}
+        {onDelete && <button onClick={() => onDelete(trip)} title={t('common.delete')} style={{ padding: '4px 8px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'var(--bg-card)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-faint)' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#fecaca'; e.currentTarget.style.color = '#ef4444' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#9ca3af' }}>
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.color = 'var(--text-faint)' }}>
           <Trash2 size={12} />
-        </button>
+        </button>}
       </div>
+      )}
     </div>
   )
 }
@@ -429,12 +536,23 @@ export default function DashboardPage(): React.ReactElement {
   const [editingTrip, setEditingTrip] = useState<DashboardTrip | null>(null)
   const [showArchived, setShowArchived] = useState<boolean>(false)
   const [showWidgetSettings, setShowWidgetSettings] = useState<boolean | 'mobile'>(false)
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => (localStorage.getItem('trek_dashboard_view') as 'grid' | 'list') || 'grid')
+  const [deleteTrip, setDeleteTrip] = useState<DashboardTrip | null>(null)
+
+  const toggleViewMode = () => {
+    setViewMode(prev => {
+      const next = prev === 'grid' ? 'list' : 'grid'
+      localStorage.setItem('trek_dashboard_view', next)
+      return next
+    })
+  }
 
   const navigate = useNavigate()
   const toast = useToast()
   const { t, locale } = useTranslation()
   const { demoMode } = useAuthStore()
   const { settings, updateSetting } = useSettingsStore()
+  const can = useCanDo()
   const dm = settings.dark_mode
   const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   const showCurrency = settings.dashboard_currency !== 'off'
@@ -489,16 +607,18 @@ export default function DashboardPage(): React.ReactElement {
     }
   }
 
-  const handleDelete = async (trip) => {
-    if (!confirm(t('dashboard.confirm.delete', { title: trip.title }))) return
+  const handleDelete = (trip) => setDeleteTrip(trip)
+  const confirmDelete = async () => {
+    if (!deleteTrip) return
     try {
-      await tripsApi.delete(trip.id)
-      setTrips(prev => prev.filter(t => t.id !== trip.id))
-      setArchivedTrips(prev => prev.filter(t => t.id !== trip.id))
+      await tripsApi.delete(deleteTrip.id)
+      setTrips(prev => prev.filter(t => t.id !== deleteTrip.id))
+      setArchivedTrips(prev => prev.filter(t => t.id !== deleteTrip.id))
       toast.success(t('dashboard.toast.deleted'))
     } catch {
       toast.error(t('dashboard.toast.deleteError'))
     }
+    setDeleteTrip(null)
   }
 
   const handleArchive = async (id) => {
@@ -554,12 +674,28 @@ export default function DashboardPage(): React.ReactElement {
               </p>
             </div>
             <div style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
+              {/* View mode toggle */}
+              <button
+                onClick={toggleViewMode}
+                title={viewMode === 'grid' ? t('dashboard.listView') : t('dashboard.gridView')}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  padding: '0 14px', height: 37,
+                  background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
+                  cursor: 'pointer', color: 'var(--text-faint)', fontFamily: 'inherit',
+                  transition: 'background 0.15s, border-color 0.15s',
+                }}
+                onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.borderColor = 'var(--text-faint)' }}
+                onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.borderColor = 'var(--border-primary)' }}
+              >
+                {viewMode === 'grid' ? <List size={15} /> : <LayoutGrid size={15} />}
+              </button>
               {/* Widget settings */}
               <button
                 onClick={() => setShowWidgetSettings(s => s ? false : true)}
                 style={{
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  padding: '0 14px',
+                  padding: '0 14px', height: 37,
                   background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
                   cursor: 'pointer', color: 'var(--text-faint)', fontFamily: 'inherit',
                   transition: 'background 0.15s, border-color 0.15s',
@@ -569,7 +705,7 @@ export default function DashboardPage(): React.ReactElement {
               >
                 <Settings size={15} />
               </button>
-              <button
+              {can('trip_create') && <button
                 onClick={() => { setEditingTrip(null); setShowForm(true) }}
                 style={{
                   display: 'flex', alignItems: 'center', gap: 7, padding: '9px 18px',
@@ -581,7 +717,7 @@ export default function DashboardPage(): React.ReactElement {
               onMouseLeave={e => e.currentTarget.style.opacity = '1'}
             >
               <Plus size={15} /> {t('dashboard.newTrip')}
-              </button>
+              </button>}
             </div>
           </div>
 
@@ -646,42 +782,58 @@ export default function DashboardPage(): React.ReactElement {
               <p style={{ margin: '0 0 24px', fontSize: 14, color: '#9ca3af', maxWidth: 340, marginLeft: 'auto', marginRight: 'auto' }}>
                 {t('dashboard.emptyText')}
               </p>
-              <button
+              {can('trip_create') && <button
                 onClick={() => { setEditingTrip(null); setShowForm(true) }}
                 style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '10px 22px', background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}
               >
                 <Plus size={16} /> {t('dashboard.emptyButton')}
-              </button>
+              </button>}
             </div>
           )}
 
-          {/* Spotlight */}
-          {!isLoading && spotlight && (
+          {/* Spotlight (grid mode only) */}
+          {!isLoading && spotlight && viewMode === 'grid' && (
             <SpotlightCard
               trip={spotlight}
               t={t} locale={locale} dark={dark}
-              onEdit={tr => { setEditingTrip(tr); setShowForm(true) }}
-              onDelete={handleDelete}
-              onArchive={handleArchive}
+              onEdit={(can('trip_edit', spotlight) || can('trip_cover_upload', spotlight)) ? tr => { setEditingTrip(tr); setShowForm(true) } : undefined}
+              onDelete={can('trip_delete', spotlight) ? handleDelete : undefined}
+              onArchive={can('trip_archive', spotlight) ? handleArchive : undefined}
               onClick={tr => navigate(`/trips/${tr.id}`)}
             />
           )}
 
-          {/* Rest grid */}
-          {!isLoading && rest.length > 0 && (
-            <div className="trip-grid" style={{ display: 'grid', gap: 16, marginBottom: 40 }}>
-              {rest.map(trip => (
-                <TripCard
-                  key={trip.id}
-                  trip={trip}
-                  t={t} locale={locale}
-                  onEdit={tr => { setEditingTrip(tr); setShowForm(true) }}
-                  onDelete={handleDelete}
-                  onArchive={handleArchive}
-                  onClick={tr => navigate(`/trips/${tr.id}`)}
-                />
-              ))}
-            </div>
+          {/* Trips — grid or list */}
+          {!isLoading && (viewMode === 'grid' ? rest : trips).length > 0 && (
+            viewMode === 'grid' ? (
+              <div className="trip-grid" style={{ display: 'grid', gap: 16, marginBottom: 40 }}>
+                {rest.map(trip => (
+                  <TripCard
+                    key={trip.id}
+                    trip={trip}
+                    t={t} locale={locale}
+                    onEdit={(can('trip_edit', trip) || can('trip_cover_upload', trip)) ? tr => { setEditingTrip(tr); setShowForm(true) } : undefined}
+                    onDelete={can('trip_delete', trip) ? handleDelete : undefined}
+                    onArchive={can('trip_archive', trip) ? handleArchive : undefined}
+                    onClick={tr => navigate(`/trips/${tr.id}`)}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 40 }}>
+                {trips.map(trip => (
+                  <TripListItem
+                    key={trip.id}
+                    trip={trip}
+                    t={t} locale={locale}
+                    onEdit={(can('trip_edit', trip) || can('trip_cover_upload', trip)) ? tr => { setEditingTrip(tr); setShowForm(true) } : undefined}
+                    onDelete={can('trip_delete', trip) ? handleDelete : undefined}
+                    onArchive={can('trip_archive', trip) ? handleArchive : undefined}
+                    onClick={tr => navigate(`/trips/${tr.id}`)}
+                  />
+                ))}
+              </div>
+            )
           )}
 
           {/* Archived section */}
@@ -704,9 +856,9 @@ export default function DashboardPage(): React.ReactElement {
                       key={trip.id}
                       trip={trip}
                       t={t} locale={locale}
-                      onEdit={tr => { setEditingTrip(tr); setShowForm(true) }}
-                      onUnarchive={handleUnarchive}
-                      onDelete={handleDelete}
+                      onEdit={(can('trip_edit', trip) || can('trip_cover_upload', trip)) ? tr => { setEditingTrip(tr); setShowForm(true) } : undefined}
+                      onUnarchive={can('trip_archive', trip) ? handleUnarchive : undefined}
+                      onDelete={can('trip_delete', trip) ? handleDelete : undefined}
                       onClick={tr => navigate(`/trips/${tr.id}`)}
                     />
                   ))}
@@ -755,6 +907,14 @@ export default function DashboardPage(): React.ReactElement {
         onCoverUpdate={handleCoverUpdate}
       />
 
+      <ConfirmDialog
+        isOpen={!!deleteTrip}
+        onClose={() => setDeleteTrip(null)}
+        onConfirm={confirmDelete}
+        title={t('common.delete')}
+        message={t('dashboard.confirm.delete', { title: deleteTrip?.title || '' })}
+      />
+
       <style>{`
         @keyframes pulse {
           0%, 100% { opacity: 1 }

client/src/pages/LoginPage.tsx

@@ -2,16 +2,18 @@ import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuthStore } from '../store/authStore'
 import { useSettingsStore } from '../store/settingsStore'
-import { useTranslation } from '../i18n'
+import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
 import { authApi } from '../api/client'
-import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield } from 'lucide-react'
+import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield, KeyRound } from 'lucide-react'
 
 interface AppConfig {
   has_users: boolean
   allow_registration: boolean
+  setup_complete: boolean
   demo_mode: boolean
   oidc_configured: boolean
   oidc_display_name?: string
+  oidc_only_mode: boolean
 }
 
 export default function LoginPage(): React.ReactElement {
@@ -24,38 +26,50 @@ export default function LoginPage(): React.ReactElement {
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
   const [appConfig, setAppConfig] = useState<AppConfig | null>(null)
+  const [inviteToken, setInviteToken] = useState<string>('')
+  const [inviteValid, setInviteValid] = useState<boolean>(false)
 
-  const { login, register, demoLogin } = useAuthStore()
+  const { login, register, demoLogin, completeMfaLogin, loadUser } = useAuthStore()
   const { setLanguageLocal } = useSettingsStore()
   const navigate = useNavigate()
 
   useEffect(() => {
-    authApi.getAppConfig?.().catch(() => null).then((config: AppConfig | null) => {
-      if (config) {
-        setAppConfig(config)
-        if (!config.has_users) setMode('register')
-      }
-    })
-
-    // Handle OIDC callback via short-lived auth code (secure exchange)
     const params = new URLSearchParams(window.location.search)
+
+    const invite = params.get('invite')
     const oidcCode = params.get('oidc_code')
     const oidcError = params.get('oidc_error')
+
+    if (invite) {
+      setInviteToken(invite)
+      setMode('register')
+      authApi.validateInvite(invite).then(() => {
+        setInviteValid(true)
+      }).catch(() => {
+        setError('Invalid or expired invite link')
+      })
+      window.history.replaceState({}, '', window.location.pathname)
+      return
+    }
+
     if (oidcCode) {
+      setIsLoading(true)
       window.history.replaceState({}, '', '/login')
-      fetch('/api/auth/oidc/exchange?code=' + encodeURIComponent(oidcCode))
+      fetch('/api/auth/oidc/exchange?code=' + encodeURIComponent(oidcCode), { credentials: 'include' })
         .then(r => r.json())
-        .then(data => {
+        .then(async data => {
           if (data.token) {
-            localStorage.setItem('auth_token', data.token)
-            navigate('/dashboard')
-            window.location.reload()
+            await loadUser()
+            navigate('/dashboard', { replace: true })
           } else {
             setError(data.error || 'OIDC login failed')
           }
         })
         .catch(() => setError('OIDC login failed'))
+        .finally(() => setIsLoading(false))
+      return
     }
+
     if (oidcError) {
       const errorMessages: Record<string, string> = {
         registration_disabled: t('login.oidc.registrationDisabled'),
@@ -65,8 +79,19 @@ export default function LoginPage(): React.ReactElement {
       }
       setError(errorMessages[oidcError] || oidcError)
       window.history.replaceState({}, '', '/login')
+      return
     }
-  }, [])
+
+    authApi.getAppConfig?.().catch(() => null).then((config: AppConfig | null) => {
+      if (config) {
+        setAppConfig(config)
+        if (!config.has_users) setMode('register')
+        if (config.oidc_only_mode && config.oidc_configured && config.has_users) {
+          window.location.href = '/api/auth/oidc/login'
+        }
+      }
+    })
+  }, [navigate, t])
 
   const handleDemoLogin = async (): Promise<void> => {
     setError('')
@@ -83,18 +108,65 @@ export default function LoginPage(): React.ReactElement {
   }
 
   const [showTakeoff, setShowTakeoff] = useState<boolean>(false)
+  const [mfaStep, setMfaStep] = useState(false)
+  const [mfaToken, setMfaToken] = useState('')
+  const [mfaCode, setMfaCode] = useState('')
+  const [passwordChangeStep, setPasswordChangeStep] = useState(false)
+  const [savedLoginPassword, setSavedLoginPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault()
     setError('')
     setIsLoading(true)
     try {
+      if (passwordChangeStep) {
+        if (!newPassword) { setError(t('settings.passwordRequired')); setIsLoading(false); return }
+        if (newPassword.length < 8) { setError(t('settings.passwordTooShort')); setIsLoading(false); return }
+        if (newPassword !== confirmPassword) { setError(t('settings.passwordMismatch')); setIsLoading(false); return }
+        await authApi.changePassword({ current_password: savedLoginPassword, new_password: newPassword })
+        await loadUser({ silent: true })
+        setShowTakeoff(true)
+        setTimeout(() => navigate('/dashboard'), 2600)
+        return
+      }
+      if (mode === 'login' && mfaStep) {
+        if (!mfaCode.trim()) {
+          setError(t('login.mfaCodeRequired'))
+          setIsLoading(false)
+          return
+        }
+        const mfaResult = await completeMfaLogin(mfaToken, mfaCode)
+        if ('user' in mfaResult && mfaResult.user?.must_change_password) {
+          setSavedLoginPassword(password)
+          setPasswordChangeStep(true)
+          setIsLoading(false)
+          return
+        }
+        setShowTakeoff(true)
+        setTimeout(() => navigate('/dashboard'), 2600)
+        return
+      }
       if (mode === 'register') {
         if (!username.trim()) { setError('Username is required'); setIsLoading(false); return }
-        if (password.length < 6) { setError('Password must be at least 6 characters'); setIsLoading(false); return }
-        await register(username, email, password)
+        if (password.length < 8) { setError('Password must be at least 8 characters'); setIsLoading(false); return }
+        await register(username, email, password, inviteToken || undefined)
       } else {
-        await login(email, password)
+        const result = await login(email, password)
+        if ('mfa_required' in result && result.mfa_required && 'mfa_token' in result) {
+          setMfaToken(result.mfa_token)
+          setMfaStep(true)
+          setMfaCode('')
+          setIsLoading(false)
+          return
+        }
+        if ('user' in result && result.user?.must_change_password) {
+          setSavedLoginPassword(password)
+          setPasswordChangeStep(true)
+          setIsLoading(false)
+          return
+        }
       }
       setShowTakeoff(true)
       setTimeout(() => navigate('/dashboard'), 2600)
@@ -104,7 +176,10 @@ export default function LoginPage(): React.ReactElement {
     }
   }
 
-  const showRegisterOption = appConfig?.allow_registration || !appConfig?.has_users
+  const showRegisterOption = (appConfig?.allow_registration || !appConfig?.has_users || inviteValid) && !appConfig?.oidc_only_mode && (appConfig?.setup_complete !== false || !appConfig?.has_users)
+
+  // In OIDC-only mode, show a minimal page that redirects directly to the IdP
+  const oidcOnly = appConfig?.oidc_only_mode && appConfig?.oidc_configured
 
   const inputBase: React.CSSProperties = {
     width: '100%', padding: '11px 12px 11px 40px', border: '1px solid #e5e7eb',
@@ -266,9 +341,14 @@ export default function LoginPage(): React.ReactElement {
   return (
     <div style={{ minHeight: '100vh', display: 'flex', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", position: 'relative' }}>
 
-      {/* Sprach-Toggle oben rechts */}
+      {/* Language toggle */}
       <button
-        onClick={() => setLanguageLocal(language === 'en' ? 'de' : 'en')}
+        onClick={() => {
+          const languages = SUPPORTED_LANGUAGES.map(({ value }) => value)
+          const currentIndex = languages.findIndex(code => code === language)
+          const nextLanguage = languages[(currentIndex + 1) % languages.length]
+          setLanguageLocal(nextLanguage)
+        }}
         style={{
           position: 'absolute', top: 16, right: 16, zIndex: 10,
           display: 'flex', alignItems: 'center', gap: 6,
@@ -282,7 +362,7 @@ export default function LoginPage(): React.ReactElement {
         onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.background = 'rgba(0,0,0,0.06)'}
       >
         <Globe size={14} />
-        {language === 'en' ? 'EN' : 'DE'}
+        {language.toUpperCase()}
       </button>
 
       {/* Left — branding */}
@@ -434,11 +514,51 @@ export default function LoginPage(): React.ReactElement {
           </div>
 
           <div style={{ background: 'white', borderRadius: 20, border: '1px solid #e5e7eb', padding: '36px 32px', boxShadow: '0 2px 16px rgba(0,0,0,0.06)' }}>
+            {oidcOnly ? (
+              <>
+                <h2 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 800, color: '#111827' }}>{t('login.title')}</h2>
+                <p style={{ margin: '0 0 24px', fontSize: 13.5, color: '#9ca3af' }}>{t('login.oidcOnly')}</p>
+                {error && (
+                  <div style={{ padding: '10px 14px', background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 10, fontSize: 13, color: '#dc2626', marginBottom: 16 }}>
+                    {error}
+                  </div>
+                )}
+                <a href={`/api/auth/oidc/login${inviteToken ? '?invite=' + encodeURIComponent(inviteToken) : ''}`}
+                  style={{
+                    width: '100%', padding: '12px',
+                    background: '#111827', color: 'white',
+                    border: 'none', borderRadius: 12,
+                    fontSize: 14, fontWeight: 700, cursor: 'pointer',
+                    fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+                    textDecoration: 'none', transition: 'all 0.15s',
+                    boxSizing: 'border-box',
+                  }}
+                  onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.background = '#1f2937' }}
+                  onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.background = '#111827' }}
+                >
+                  <Shield size={16} />
+                  {t('login.oidcSignIn', { name: appConfig?.oidc_display_name || 'SSO' })}
+                </a>
+              </>
+            ) : (
+            <>
             <h2 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 800, color: '#111827' }}>
-              {mode === 'register' ? (!appConfig?.has_users ? t('login.createAdmin') : t('login.createAccount')) : t('login.title')}
+              {passwordChangeStep
+                ? t('login.setNewPassword')
+                : mode === 'login' && mfaStep
+                  ? t('login.mfaTitle')
+                  : mode === 'register'
+                    ? (!appConfig?.has_users ? t('login.createAdmin') : t('login.createAccount'))
+                    : t('login.title')}
             </h2>
             <p style={{ margin: '0 0 28px', fontSize: 13.5, color: '#9ca3af' }}>
-              {mode === 'register' ? (!appConfig?.has_users ? t('login.createAdminHint') : t('login.createAccountHint')) : t('login.subtitle')}
+              {passwordChangeStep
+                ? t('login.setNewPasswordHint')
+                : mode === 'login' && mfaStep
+                  ? t('login.mfaSubtitle')
+                  : mode === 'register'
+                    ? (!appConfig?.has_users ? t('login.createAdminHint') : t('login.createAccountHint'))
+                    : t('login.subtitle')}
             </p>
 
             <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
@@ -448,8 +568,69 @@ export default function LoginPage(): React.ReactElement {
                 </div>
               )}
 
+              {passwordChangeStep && (
+                <>
+                  <div style={{ padding: '10px 14px', background: '#fefce8', border: '1px solid #fde68a', borderRadius: 10, fontSize: 13, color: '#92400e' }}>
+                    {t('settings.mustChangePassword')}
+                  </div>
+                  <div>
+                    <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('settings.newPassword')}</label>
+                    <div style={{ position: 'relative' }}>
+                      <Lock size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                      <input
+                        type="password" value={newPassword} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewPassword(e.target.value)} required
+                        placeholder={t('settings.newPassword')} style={inputBase}
+                        onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}
+                        onBlur={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#e5e7eb'}
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('settings.confirmPassword')}</label>
+                    <div style={{ position: 'relative' }}>
+                      <Lock size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                      <input
+                        type="password" value={confirmPassword} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setConfirmPassword(e.target.value)} required
+                        placeholder={t('settings.confirmPassword')} style={inputBase}
+                        onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}
+                        onBlur={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#e5e7eb'}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {mode === 'login' && mfaStep && !passwordChangeStep && (
+                <div>
+                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('login.mfaCodeLabel')}</label>
+                  <div style={{ position: 'relative' }}>
+                    <KeyRound size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                    <input
+                      type="text"
+                      inputMode="text"
+                      autoComplete="one-time-code"
+                      value={mfaCode}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMfaCode(e.target.value.toUpperCase().slice(0, 24))}
+                      placeholder="000000 or XXXX-XXXX"
+                      required
+                      style={inputBase}
+                      onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}
+                      onBlur={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#e5e7eb'}
+                    />
+                  </div>
+                  <p style={{ fontSize: 12, color: '#9ca3af', marginTop: 8 }}>{t('login.mfaHint')}</p>
+                  <button
+                    type="button"
+                    onClick={() => { setMfaStep(false); setMfaToken(''); setMfaCode(''); setError('') }}
+                    style={{ marginTop: 8, background: 'none', border: 'none', color: '#6b7280', fontSize: 13, cursor: 'pointer', padding: 0, fontFamily: 'inherit' }}
+                  >
+                    {t('login.mfaBack')}
+                  </button>
+                </div>
+              )}
+
               {/* Username (register only) */}
-              {mode === 'register' && (
+              {mode === 'register' && !passwordChangeStep && (
                 <div>
                   <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('login.username')}</label>
                   <div style={{ position: 'relative' }}>
@@ -465,6 +646,7 @@ export default function LoginPage(): React.ReactElement {
               )}
 
               {/* Email */}
+              {!(mode === 'login' && mfaStep) && !passwordChangeStep && (
               <div>
                 <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('common.email')}</label>
                 <div style={{ position: 'relative' }}>
@@ -477,8 +659,10 @@ export default function LoginPage(): React.ReactElement {
                   />
                 </div>
               </div>
+              )}
 
               {/* Password */}
+              {!(mode === 'login' && mfaStep) && !passwordChangeStep && (
               <div>
                 <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('common.password')}</label>
                 <div style={{ position: 'relative' }}>
@@ -497,6 +681,7 @@ export default function LoginPage(): React.ReactElement {
                   </button>
                 </div>
               </div>
+              )}
 
               <button type="submit" disabled={isLoading} style={{
                 marginTop: 4, width: '100%', padding: '12px', background: '#111827', color: 'white',
@@ -508,33 +693,34 @@ export default function LoginPage(): React.ReactElement {
                 onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.background = '#111827'}
               >
                 {isLoading
-                  ? <><div style={{ width: 15, height: 15, border: '2px solid rgba(255,255,255,0.3)', borderTopColor: 'white', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />{mode === 'register' ? t('login.creating') : t('login.signingIn')}</>
-                  : <><Plane size={16} />{mode === 'register' ? t('login.createAccount') : t('login.signIn')}</>
+                  ? <><div style={{ width: 15, height: 15, border: '2px solid rgba(255,255,255,0.3)', borderTopColor: 'white', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />{passwordChangeStep ? t('settings.updatePassword') : mode === 'register' ? t('login.creating') : (mode === 'login' && mfaStep ? t('login.mfaVerify') : t('login.signingIn'))}</>
+                  : <><Plane size={16} />{passwordChangeStep ? t('settings.updatePassword') : mode === 'register' ? t('login.createAccount') : (mode === 'login' && mfaStep ? t('login.mfaVerify') : t('login.signIn'))}</>
                 }
               </button>
             </form>
 
             {/* Toggle login/register */}
-            {showRegisterOption && appConfig?.has_users && !appConfig?.demo_mode && (
+            {showRegisterOption && appConfig?.has_users && !appConfig?.demo_mode && !passwordChangeStep && (
               <p style={{ textAlign: 'center', marginTop: 16, fontSize: 13, color: '#9ca3af' }}>
                 {mode === 'login' ? t('login.noAccount') + ' ' : t('login.hasAccount') + ' '}
-                <button onClick={() => { setMode(m => m === 'login' ? 'register' : 'login'); setError('') }}
+                <button onClick={() => { setMode(m => m === 'login' ? 'register' : 'login'); setError(''); setMfaStep(false); setMfaToken(''); setMfaCode('') }}
                   style={{ background: 'none', border: 'none', color: '#111827', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13 }}>
                   {mode === 'login' ? t('login.register') : t('login.signIn')}
                 </button>
               </p>
             )}
+            </>)}
           </div>
 
-          {/* OIDC / SSO login button */}
-          {appConfig?.oidc_configured && (
+          {/* OIDC / SSO login button (only when OIDC is configured but not in oidc-only mode) */}
+          {appConfig?.oidc_configured && !oidcOnly && (
             <>
               <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 16 }}>
                 <div style={{ flex: 1, height: 1, background: '#e5e7eb' }} />
                 <span style={{ fontSize: 12, color: '#9ca3af' }}>{t('common.or')}</span>
                 <div style={{ flex: 1, height: 1, background: '#e5e7eb' }} />
               </div>
-              <a href="/api/auth/oidc/login"
+              <a href={`/api/auth/oidc/login${inviteToken ? '?invite=' + encodeURIComponent(inviteToken) : ''}`}
                 style={{
                   marginTop: 12, width: '100%', padding: '12px',
                   background: 'white', color: '#374151',

client/src/pages/RegisterPage.tsx

@@ -26,7 +26,7 @@ export default function RegisterPage(): React.ReactElement {
       return
     }
 
-    if (password.length < 6) {
+    if (password.length < 8) {
       setError(t('register.passwordTooShort'))
       return
     }

client/src/pages/SettingsPage.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useAuthStore } from '../store/authStore'
 import { useSettingsStore } from '../store/settingsStore'
-import { useTranslation } from '../i18n'
+import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
 import Navbar from '../components/Layout/Navbar'
 import CustomSelect from '../components/shared/CustomSelect'
 import { useToast } from '../components/shared/Toast'
-import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock } from 'lucide-react'
+import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock, KeyRound, AlertTriangle, Copy, Download, Printer, Terminal, Plus, Check } from 'lucide-react'
 import { authApi, adminApi } from '../api/client'
+import apiClient from '../api/client'
+import { useAddonStore } from '../store/addonStore'
 import type { LucideIcon } from 'lucide-react'
 import type { UserWithOidc } from '../types'
 import { getApiErrorMessage } from '../types'
@@ -17,6 +19,15 @@ interface MapPreset {
   url: string
 }
 
+const MFA_BACKUP_SESSION_KEY = 'trek_mfa_backup_codes_pending'
+interface McpToken {
+  id: number
+  name: string
+  token_prefix: string
+  created_at: string
+  last_used_at: string | null
+}
+
 const MAP_PRESETS: MapPreset[] = [
   { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
   { name: 'OpenStreetMap DE', url: 'https://tile.openstreetmap.de/{z}/{x}/{y}.png' },
@@ -33,7 +44,7 @@ interface SectionProps {
 
 function Section({ title, icon: Icon, children }: SectionProps): React.ReactElement {
   return (
-    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', breakInside: 'avoid', marginBottom: 24 }}>
       <div className="px-6 py-4 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-secondary)' }}>
         <Icon className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
         <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
@@ -45,17 +56,189 @@ function Section({ title, icon: Icon, children }: SectionProps): React.ReactElem
   )
 }
 
+function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
+  return (
+    <button onClick={onToggle}
+      style={{
+        position: 'relative', width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
+        background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
+        transition: 'background 0.2s',
+      }}>
+      <span style={{
+        position: 'absolute', top: 2, left: on ? 22 : 2,
+        width: 20, height: 20, borderRadius: '50%', background: 'white',
+        transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+      }} />
+    </button>
+  )
+}
+
+function NotificationPreferences({ t }: { t: any; memoriesEnabled: boolean }) {
+  const [notifChannel, setNotifChannel] = useState<string>('none')
+  useEffect(() => {
+    authApi.getAppConfig?.().then((cfg: any) => {
+      if (cfg?.notification_channel) setNotifChannel(cfg.notification_channel)
+    }).catch(() => {})
+  }, [])
+
+  if (notifChannel === 'none') {
+    return (
+      <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>
+        {t('settings.notificationsDisabled')}
+      </p>
+    )
+  }
+
+  const channelLabel = notifChannel === 'email'
+    ? (t('admin.notifications.email') || 'Email (SMTP)')
+    : (t('admin.notifications.webhook') || 'Webhook')
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#22c55e', flexShrink: 0 }} />
+        <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 500 }}>
+          {t('settings.notificationsActive')}: {channelLabel}
+        </span>
+      </div>
+      <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: 0, lineHeight: 1.5 }}>
+        {t('settings.notificationsManagedByAdmin')}
+      </p>
+    </div>
+  )
+}
+
 export default function SettingsPage(): React.ReactElement {
-  const { user, updateProfile, uploadAvatar, deleteAvatar, logout } = useAuthStore()
+  const { user, updateProfile, uploadAvatar, deleteAvatar, logout, loadUser, demoMode, appRequireMfa } = useAuthStore()
+  const [searchParams] = useSearchParams()
   const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean | 'blocked'>(false)
   const avatarInputRef = React.useRef<HTMLInputElement>(null)
   const { settings, updateSetting, updateSettings } = useSettingsStore()
+  const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
   const { t, locale } = useTranslation()
   const toast = useToast()
   const navigate = useNavigate()
 
   const [saving, setSaving] = useState<Record<string, boolean>>({})
 
+  // Addon gating (derived from store)
+  const memoriesEnabled = addonEnabled('memories')
+  const mcpEnabled = addonEnabled('mcp')
+  const [immichUrl, setImmichUrl] = useState('')
+  const [immichApiKey, setImmichApiKey] = useState('')
+  const [immichConnected, setImmichConnected] = useState(false)
+  const [immichTesting, setImmichTesting] = useState(false)
+
+  useEffect(() => {
+    loadAddons()
+  }, [])
+
+  useEffect(() => {
+    if (memoriesEnabled) {
+      apiClient.get('/integrations/immich/settings').then(r2 => {
+        setImmichUrl(r2.data.immich_url || '')
+        setImmichConnected(r2.data.connected)
+      }).catch(() => {})
+    }
+  }, [memoriesEnabled])
+
+  const [immichTestPassed, setImmichTestPassed] = useState(false)
+
+  const handleSaveImmich = async () => {
+    setSaving(s => ({ ...s, immich: true }))
+    try {
+      const saveRes = await apiClient.put('/integrations/immich/settings', { immich_url: immichUrl, immich_api_key: immichApiKey || undefined })
+      if (saveRes.data.warning) toast.warn(saveRes.data.warning)
+      toast.success(t('memories.saved'))
+      const res = await apiClient.get('/integrations/immich/status')
+      setImmichConnected(res.data.connected)
+      setImmichTestPassed(false)
+    } catch {
+      toast.error(t('memories.connectionError'))
+    } finally {
+      setSaving(s => ({ ...s, immich: false }))
+    }
+  }
+
+  const handleTestImmich = async () => {
+    setImmichTesting(true)
+    try {
+      const res = await apiClient.post('/integrations/immich/test', { immich_url: immichUrl, immich_api_key: immichApiKey })
+      if (res.data.connected) {
+        toast.success(`${t('memories.connectionSuccess')} — ${res.data.user?.name || ''}`)
+        setImmichTestPassed(true)
+      } else {
+        toast.error(`${t('memories.connectionError')}: ${res.data.error}`)
+        setImmichTestPassed(false)
+      }
+    } catch {
+      toast.error(t('memories.connectionError'))
+    } finally {
+      setImmichTesting(false)
+    }
+  }
+
+  // MCP tokens
+  const [mcpTokens, setMcpTokens] = useState<McpToken[]>([])
+  const [mcpModalOpen, setMcpModalOpen] = useState(false)
+  const [mcpNewName, setMcpNewName] = useState('')
+  const [mcpCreatedToken, setMcpCreatedToken] = useState<string | null>(null)
+  const [mcpCreating, setMcpCreating] = useState(false)
+  const [mcpDeleteId, setMcpDeleteId] = useState<number | null>(null)
+  const [copiedKey, setCopiedKey] = useState<string | null>(null)
+
+  useEffect(() => {
+    authApi.mcpTokens.list().then(d => setMcpTokens(d.tokens || [])).catch(() => {})
+  }, [])
+
+  const handleCreateMcpToken = async () => {
+    if (!mcpNewName.trim()) return
+    setMcpCreating(true)
+    try {
+      const d = await authApi.mcpTokens.create(mcpNewName.trim())
+      setMcpCreatedToken(d.token.raw_token)
+      setMcpNewName('')
+      setMcpTokens(prev => [{ id: d.token.id, name: d.token.name, token_prefix: d.token.token_prefix, created_at: d.token.created_at, last_used_at: null }, ...prev])
+    } catch {
+      toast.error(t('settings.mcp.toast.createError'))
+    } finally {
+      setMcpCreating(false)
+    }
+  }
+
+  const handleDeleteMcpToken = async (id: number) => {
+    try {
+      await authApi.mcpTokens.delete(id)
+      setMcpTokens(prev => prev.filter(tk => tk.id !== id))
+      setMcpDeleteId(null)
+      toast.success(t('settings.mcp.toast.deleted'))
+    } catch {
+      toast.error(t('settings.mcp.toast.deleteError'))
+    }
+  }
+
+  const handleCopy = (text: string, key: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedKey(key)
+      setTimeout(() => setCopiedKey(null), 2000)
+    })
+  }
+
+  const mcpEndpoint = `${window.location.origin}/mcp`
+  const mcpJsonConfig = `{
+  "mcpServers": {
+    "trek": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "${mcpEndpoint}",
+        "--header",
+        "Authorization: Bearer <your_token>"
+      ]
+    }
+  }
+}`
+
   // Map settings
   const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
   const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
@@ -71,6 +254,85 @@ export default function SettingsPage(): React.ReactElement {
   const [currentPassword, setCurrentPassword] = useState<string>('')
   const [newPassword, setNewPassword] = useState<string>('')
   const [confirmPassword, setConfirmPassword] = useState<string>('')
+  const [oidcOnlyMode, setOidcOnlyMode] = useState<boolean>(false)
+
+  useEffect(() => {
+    authApi.getAppConfig?.().then((config) => {
+      if (config?.oidc_only_mode) setOidcOnlyMode(true)
+    }).catch(() => {})
+  }, [])
+
+  const [mfaQr, setMfaQr] = useState<string | null>(null)
+  const [mfaSecret, setMfaSecret] = useState<string | null>(null)
+  const [mfaSetupCode, setMfaSetupCode] = useState('')
+  const [mfaDisablePwd, setMfaDisablePwd] = useState('')
+  const [mfaDisableCode, setMfaDisableCode] = useState('')
+  const [mfaLoading, setMfaLoading] = useState(false)
+  const mfaRequiredByPolicy =
+    !demoMode &&
+    !user?.mfa_enabled &&
+    (searchParams.get('mfa') === 'required' || appRequireMfa)
+
+  const [backupCodes, setBackupCodes] = useState<string[] | null>(null)
+
+  const backupCodesText = backupCodes?.join('\n') || ''
+
+  // Restore backup codes panel after refresh (loadUser silent fix + sessionStorage)
+  useEffect(() => {
+    if (!user?.mfa_enabled || backupCodes) return
+    try {
+      const raw = sessionStorage.getItem(MFA_BACKUP_SESSION_KEY)
+      if (!raw) return
+      const parsed = JSON.parse(raw) as unknown
+      if (Array.isArray(parsed) && parsed.length > 0 && parsed.every((x) => typeof x === 'string')) {
+        setBackupCodes(parsed)
+      }
+    } catch {
+      sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+    }
+  }, [user?.mfa_enabled, backupCodes])
+
+  const dismissBackupCodes = (): void => {
+    sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+    setBackupCodes(null)
+  }
+
+  const copyBackupCodes = async (): Promise<void> => {
+    if (!backupCodesText) return
+    try {
+      await navigator.clipboard.writeText(backupCodesText)
+      toast.success(t('settings.mfa.backupCopied'))
+    } catch {
+      toast.error(t('common.error'))
+    }
+  }
+
+  const downloadBackupCodes = (): void => {
+    if (!backupCodesText) return
+    const blob = new Blob([backupCodesText + '\n'], { type: 'text/plain;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'trek-mfa-backup-codes.txt'
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+    URL.revokeObjectURL(url)
+  }
+
+  const printBackupCodes = (): void => {
+    if (!backupCodesText) return
+    const html = `<!doctype html><html><head><meta charset="utf-8"/><title>TREK MFA Backup Codes</title>
+      <style>body{font-family:Arial,sans-serif;padding:32px}h1{font-size:20px}pre{font-size:16px;line-height:1.6}</style>
+      </head><body><h1>TREK MFA Backup Codes</h1><p>${new Date().toLocaleString()}</p><pre>${backupCodesText}</pre></body></html>`
+    const w = window.open('', '_blank', 'width=900,height=700')
+    if (!w) return
+    w.document.open()
+    w.document.write(html)
+    w.document.close()
+    w.focus()
+    w.print()
+  }
 
   useEffect(() => {
     setMapTileUrl(settings.map_tile_url || '')
@@ -152,18 +414,21 @@ export default function SettingsPage(): React.ReactElement {
       <Navbar />
 
       <div style={{ paddingTop: 'var(--nav-h)' }}>
-        <div className="max-w-2xl mx-auto px-4 py-8 space-y-6">
-          <div>
+        <div className="max-w-5xl mx-auto px-4 py-8">
+          <style>{`@media (max-width: 900px) { .settings-columns { column-count: 1 !important; } }`}</style>
+          <div style={{ marginBottom: 24 }}>
             <h1 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('settings.title')}</h1>
             <p className="text-sm mt-0.5" style={{ color: 'var(--text-muted)' }}>{t('settings.subtitle')}</p>
           </div>
 
+          <div className="settings-columns" style={{ columnCount: 2, columnGap: 24 }}>
+
           {/* Map settings */}
           <Section title={t('settings.map')} icon={Map}>
             <div>
               <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapTemplate')}</label>
               <CustomSelect
-                value=""
+                value={mapTileUrl}
                 onChange={(value: string) => { if (value) setMapTileUrl(value) }}
                 placeholder={t('settings.mapTemplatePlaceholder.select')}
                 options={MAP_PRESETS.map(p => ({
@@ -258,11 +523,8 @@ export default function SettingsPage(): React.ReactElement {
             {/* Sprache */}
             <div>
               <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.language')}</label>
-              <div className="flex gap-3">
-                {[
-                  { value: 'de', label: 'Deutsch' },
-                  { value: 'en', label: 'English' },
-                ].map(opt => (
+              <div className="flex flex-wrap gap-3">
+                {SUPPORTED_LANGUAGES.map(opt => (
                   <button
                     key={opt.value}
                     onClick={async () => {
@@ -374,8 +636,239 @@ export default function SettingsPage(): React.ReactElement {
                 ))}
               </div>
             </div>
+
+          {/* Blur Booking Codes */}
+            <div>
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.blurBookingCodes')}</label>
+              <div className="flex gap-3">
+                {[
+                  { value: true, label: t('settings.on') || 'On' },
+                  { value: false, label: t('settings.off') || 'Off' },
+                ].map(opt => (
+                  <button
+                    key={String(opt.value)}
+                    onClick={async () => {
+                      try { await updateSetting('blur_booking_codes', opt.value) }
+                      catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+                    }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                      border: (!!settings.blur_booking_codes) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                      background: (!!settings.blur_booking_codes) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                      color: 'var(--text-primary)',
+                      transition: 'all 0.15s',
+                    }}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
           </Section>
 
+          {/* Notifications */}
+          <Section title={t('settings.notifications')} icon={Lock}>
+            <NotificationPreferences t={t} memoriesEnabled={memoriesEnabled} />
+          </Section>
+
+          {/* Immich — only when Memories addon is enabled */}
+          {memoriesEnabled && (
+            <Section title="Immich" icon={Camera}>
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('memories.immichUrl')}</label>
+                  <input type="url" value={immichUrl} onChange={e => { setImmichUrl(e.target.value); setImmichTestPassed(false) }}
+                    placeholder="https://immich.example.com"
+                    className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300" />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('memories.immichApiKey')}</label>
+                  <input type="password" value={immichApiKey} onChange={e => { setImmichApiKey(e.target.value); setImmichTestPassed(false) }}
+                    placeholder={immichConnected ? '••••••••' : 'API Key'}
+                    className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300" />
+                </div>
+                <div className="flex items-center gap-3">
+                  <button onClick={handleSaveImmich} disabled={saving.immich || !immichTestPassed}
+                    className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+                    title={!immichTestPassed ? t('memories.testFirst') : ''}>
+                    <Save className="w-4 h-4" /> {t('common.save')}
+                  </button>
+                  <button onClick={handleTestImmich} disabled={immichTesting}
+                    className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50">
+                    {immichTesting
+                      ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
+                      : <Camera className="w-4 h-4" />}
+                    {t('memories.testConnection')}
+                  </button>
+                  {immichConnected && (
+                    <span className="text-xs font-medium text-green-600 flex items-center gap-1">
+                      <span className="w-2 h-2 bg-green-500 rounded-full" />
+                      {t('memories.connected')}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </Section>
+          )}
+
+          {/* MCP Configuration — only when MCP addon is enabled */}
+          {mcpEnabled && <Section title={t('settings.mcp.title')} icon={Terminal}>
+            {/* Endpoint URL */}
+            <div>
+              <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.endpoint')}</label>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 px-3 py-2 rounded-lg text-sm font-mono border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                  {mcpEndpoint}
+                </code>
+                <button onClick={() => handleCopy(mcpEndpoint, 'endpoint')}
+                  className="p-2 rounded-lg border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                  style={{ borderColor: 'var(--border-primary)' }} title={t('settings.mcp.copy')}>
+                  {copiedKey === 'endpoint' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />}
+                </button>
+              </div>
+            </div>
+
+            {/* JSON config box */}
+            <div>
+              <div className="flex items-center justify-between mb-1.5">
+                <label className="block text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.clientConfig')}</label>
+                <button onClick={() => handleCopy(mcpJsonConfig, 'json')}
+                  className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                  style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                  {copiedKey === 'json' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
+                  {copiedKey === 'json' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
+                </button>
+              </div>
+              <pre className="p-3 rounded-lg text-xs font-mono overflow-x-auto border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                {mcpJsonConfig}
+              </pre>
+              <p className="mt-1.5 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.mcp.clientConfigHint')}</p>
+            </div>
+
+            {/* Token list */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.apiTokens')}</label>
+                <button onClick={() => { setMcpModalOpen(true); setMcpCreatedToken(null); setMcpNewName('') }}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                  style={{ background: 'var(--accent-primary, #4f46e5)', color: '#fff' }}>
+                  <Plus className="w-3.5 h-3.5" /> {t('settings.mcp.createToken')}
+                </button>
+              </div>
+
+              {mcpTokens.length === 0 ? (
+                <p className="text-sm py-3 text-center rounded-lg border" style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)' }}>
+                  {t('settings.mcp.noTokens')}
+                </p>
+              ) : (
+                <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+                  {mcpTokens.map((token, i) => (
+                    <div key={token.id} className="flex items-center gap-3 px-4 py-3"
+                      style={{ borderBottom: i < mcpTokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{token.name}</p>
+                        <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
+                          {token.token_prefix}...
+                          <span className="ml-3 font-sans">{t('settings.mcp.tokenCreatedAt')} {new Date(token.created_at).toLocaleDateString(locale)}</span>
+                          {token.last_used_at && (
+                            <span className="ml-2">· {t('settings.mcp.tokenUsedAt')} {new Date(token.last_used_at).toLocaleDateString(locale)}</span>
+                          )}
+                        </p>
+                      </div>
+                      <button onClick={() => setMcpDeleteId(token.id)}
+                        className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                        style={{ color: 'var(--text-tertiary)' }} title={t('settings.mcp.deleteTokenTitle')}>
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </Section>}
+
+          {/* Create MCP Token modal */}
+          {mcpModalOpen && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
+              onClick={e => { if (e.target === e.currentTarget && !mcpCreatedToken) { setMcpModalOpen(false) } }}>
+              <div className="rounded-xl shadow-xl w-full max-w-md p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
+                {!mcpCreatedToken ? (
+                  <>
+                    <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.modal.createTitle')}</h3>
+                    <div>
+                      <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.modal.tokenName')}</label>
+                      <input type="text" value={mcpNewName} onChange={e => setMcpNewName(e.target.value)}
+                        onKeyDown={e => e.key === 'Enter' && handleCreateMcpToken()}
+                        placeholder={t('settings.mcp.modal.tokenNamePlaceholder')}
+                        className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300"
+                        style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
+                        autoFocus />
+                    </div>
+                    <div className="flex gap-2 justify-end pt-1">
+                      <button onClick={() => setMcpModalOpen(false)}
+                        className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                        {t('common.cancel')}
+                      </button>
+                      <button onClick={handleCreateMcpToken} disabled={!mcpNewName.trim() || mcpCreating}
+                        className="px-4 py-2 rounded-lg text-sm font-medium text-white disabled:opacity-50"
+                        style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                        {mcpCreating ? t('settings.mcp.modal.creating') : t('settings.mcp.modal.create')}
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.modal.createdTitle')}</h3>
+                    <div className="flex items-start gap-2 p-3 rounded-lg border border-amber-200" style={{ background: 'rgba(251,191,36,0.1)' }}>
+                      <span className="text-amber-500 mt-0.5">⚠</span>
+                      <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.modal.createdWarning')}</p>
+                    </div>
+                    <div className="relative">
+                      <pre className="p-3 pr-10 rounded-lg text-xs font-mono break-all border whitespace-pre-wrap" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                        {mcpCreatedToken}
+                      </pre>
+                      <button onClick={() => handleCopy(mcpCreatedToken, 'new-token')}
+                        className="absolute top-2 right-2 p-1.5 rounded transition-colors hover:bg-slate-200 dark:hover:bg-slate-600"
+                        style={{ color: 'var(--text-secondary)' }} title={t('settings.mcp.copy')}>
+                        {copiedKey === 'new-token' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                      </button>
+                    </div>
+                    <div className="flex justify-end">
+                      <button onClick={() => { setMcpModalOpen(false); setMcpCreatedToken(null) }}
+                        className="px-4 py-2 rounded-lg text-sm font-medium text-white"
+                        style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                        {t('settings.mcp.modal.done')}
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Delete MCP Token confirm */}
+          {mcpDeleteId !== null && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
+              onClick={e => { if (e.target === e.currentTarget) setMcpDeleteId(null) }}>
+              <div className="rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
+                <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.deleteTokenTitle')}</h3>
+                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.deleteTokenMessage')}</p>
+                <div className="flex gap-2 justify-end">
+                  <button onClick={() => setMcpDeleteId(null)}
+                    className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                    {t('common.cancel')}
+                  </button>
+                  <button onClick={() => handleDeleteMcpToken(mcpDeleteId)}
+                    className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
+                    {t('settings.mcp.deleteTokenTitle')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Account */}
           <Section title={t('settings.account')} icon={User}>
             <div>
@@ -398,7 +891,8 @@ export default function SettingsPage(): React.ReactElement {
             </div>
 
             {/* Change Password */}
-            <div style={{ paddingTop: 8, marginTop: 8, borderTop: '1px solid var(--border-secondary)' }}>
+            {!oidcOnlyMode && (
+            <div style={{ paddingTop: 16, marginTop: 16, borderTop: '1px solid var(--border-secondary)' }}>
               <label className="block text-sm font-medium text-slate-700 mb-3">{t('settings.changePassword')}</label>
               <div className="space-y-3">
                 <input
@@ -432,6 +926,7 @@ export default function SettingsPage(): React.ReactElement {
                       await authApi.changePassword({ current_password: currentPassword, new_password: newPassword })
                       toast.success(t('settings.passwordChanged'))
                       setCurrentPassword(''); setNewPassword(''); setConfirmPassword('')
+                      await loadUser({ silent: true })
                     } catch (err: unknown) {
                       toast.error(getApiErrorMessage(err, t('common.error')))
                     }
@@ -446,6 +941,193 @@ export default function SettingsPage(): React.ReactElement {
                 </button>
               </div>
             </div>
+            )}
+
+            {/* MFA */}
+            <div style={{ paddingTop: 16, marginTop: 16, borderTop: '1px solid var(--border-secondary)' }}>
+              <div className="flex items-center gap-2 mb-3">
+                <KeyRound className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+                <h3 className="font-semibold text-base m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.title')}</h3>
+              </div>
+              <div className="space-y-3">
+                {mfaRequiredByPolicy && (
+                  <div
+                    className="flex gap-3 p-3 rounded-lg border text-sm"
+                    style={{
+                      background: 'var(--bg-secondary)',
+                      borderColor: 'var(--border-primary)',
+                      color: 'var(--text-primary)',
+                    }}
+                  >
+                    <AlertTriangle className="w-5 h-5 flex-shrink-0 text-amber-600" />
+                    <p className="m-0 leading-relaxed">{t('settings.mfa.requiredByPolicy')}</p>
+                  </div>
+                )}
+                <p className="text-sm m-0" style={{ color: 'var(--text-muted)', lineHeight: 1.5 }}>{t('settings.mfa.description')}</p>
+                {demoMode ? (
+                  <p className="text-sm text-amber-700 m-0">{t('settings.mfa.demoBlocked')}</p>
+                ) : (
+                  <>
+                    <p className="text-sm font-medium m-0" style={{ color: 'var(--text-secondary)' }}>
+                      {user?.mfa_enabled ? t('settings.mfa.enabled') : t('settings.mfa.disabled')}
+                    </p>
+
+                    {!user?.mfa_enabled && !mfaQr && (
+                      <button
+                        type="button"
+                        disabled={mfaLoading}
+                        onClick={async () => {
+                          setMfaLoading(true)
+                          try {
+                            const data = await authApi.mfaSetup() as { qr_data_url: string; secret: string }
+                            setMfaQr(data.qr_data_url)
+                            setMfaSecret(data.secret)
+                            setMfaSetupCode('')
+                          } catch (err: unknown) {
+                            toast.error(getApiErrorMessage(err, t('common.error')))
+                          } finally {
+                            setMfaLoading(false)
+                          }
+                        }}
+                        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+                        style={{ border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+                      >
+                        {mfaLoading ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" /> : <KeyRound size={14} />}
+                        {t('settings.mfa.setup')}
+                      </button>
+                    )}
+
+                    {!user?.mfa_enabled && mfaQr && (
+                      <div className="space-y-3">
+                        <p className="text-sm" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.scanQr')}</p>
+                        <img src={mfaQr} alt="" className="rounded-lg border mx-auto block" style={{ maxWidth: 200, borderColor: 'var(--border-primary)' }} />
+                        <div>
+                          <label className="block text-xs font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.secretLabel')}</label>
+                          <code className="block text-xs p-2 rounded break-all" style={{ background: 'var(--bg-hover)', color: 'var(--text-primary)' }}>{mfaSecret}</code>
+                        </div>
+                        <input
+                          type="text"
+                          inputMode="numeric"
+                          value={mfaSetupCode}
+                          onChange={(e) => setMfaSetupCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                          placeholder={t('settings.mfa.codePlaceholder')}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                        />
+                        <div className="flex flex-wrap gap-2">
+                          <button
+                            type="button"
+                            disabled={mfaLoading || mfaSetupCode.length < 6}
+                            onClick={async () => {
+                              setMfaLoading(true)
+                              try {
+                                const resp = await authApi.mfaEnable({ code: mfaSetupCode }) as { backup_codes?: string[] }
+                                toast.success(t('settings.mfa.toastEnabled'))
+                                setMfaQr(null)
+                                setMfaSecret(null)
+                                setMfaSetupCode('')
+                                const codes = resp.backup_codes || null
+                                if (codes?.length) {
+                                  try {
+                                    sessionStorage.setItem(MFA_BACKUP_SESSION_KEY, JSON.stringify(codes))
+                                  } catch {
+                                    /* ignore quota / private mode */
+                                  }
+                                }
+                                setBackupCodes(codes)
+                                await loadUser({ silent: true })
+                              } catch (err: unknown) {
+                                toast.error(getApiErrorMessage(err, t('common.error')))
+                              } finally {
+                                setMfaLoading(false)
+                              }
+                            }}
+                            className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:opacity-50"
+                          >
+                            {t('settings.mfa.enable')}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => { setMfaQr(null); setMfaSecret(null); setMfaSetupCode('') }}
+                            className="px-4 py-2 rounded-lg text-sm border"
+                            style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}
+                          >
+                            {t('settings.mfa.cancelSetup')}
+                          </button>
+                        </div>
+                      </div>
+                    )}
+
+                    {user?.mfa_enabled && (
+                      <div className="space-y-3">
+                        <p className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.disableTitle')}</p>
+                        <p className="text-xs" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.disableHint')}</p>
+                        <input
+                          type="password"
+                          value={mfaDisablePwd}
+                          onChange={(e) => setMfaDisablePwd(e.target.value)}
+                          placeholder={t('settings.currentPassword')}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                        />
+                        <input
+                          type="text"
+                          inputMode="numeric"
+                          value={mfaDisableCode}
+                          onChange={(e) => setMfaDisableCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                          placeholder={t('settings.mfa.codePlaceholder')}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                        />
+                        <button
+                          type="button"
+                          disabled={mfaLoading || !mfaDisablePwd || mfaDisableCode.length < 6}
+                          onClick={async () => {
+                            setMfaLoading(true)
+                            try {
+                              await authApi.mfaDisable({ password: mfaDisablePwd, code: mfaDisableCode })
+                              toast.success(t('settings.mfa.toastDisabled'))
+                              setMfaDisablePwd('')
+                              setMfaDisableCode('')
+                              sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+                              setBackupCodes(null)
+                              await loadUser({ silent: true })
+                            } catch (err: unknown) {
+                              toast.error(getApiErrorMessage(err, t('common.error')))
+                            } finally {
+                              setMfaLoading(false)
+                            }
+                          }}
+                          className="px-4 py-2 rounded-lg text-sm font-medium text-red-600 border border-red-200 hover:bg-red-50 disabled:opacity-50"
+                        >
+                          {t('settings.mfa.disable')}
+                        </button>
+                      </div>
+                    )}
+
+                    {backupCodes && backupCodes.length > 0 && (
+                      <div className="space-y-3 p-3 rounded-lg border" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-hover)' }}>
+                        <p className="text-sm font-semibold m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.backupTitle')}</p>
+                        <p className="text-xs m-0" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.backupDescription')}</p>
+                        <pre className="text-xs m-0 p-2 rounded border overflow-auto" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', maxHeight: 220 }}>{backupCodesText}</pre>
+                        <p className="text-xs m-0" style={{ color: '#b45309' }}>{t('settings.mfa.backupWarning')}</p>
+                        <div className="flex flex-wrap gap-2">
+                          <button type="button" onClick={copyBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                            <Copy size={13} /> {t('settings.mfa.backupCopy')}
+                          </button>
+                          <button type="button" onClick={downloadBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                            <Download size={13} /> {t('settings.mfa.backupDownload')}
+                          </button>
+                          <button type="button" onClick={printBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                            <Printer size={13} /> {t('settings.mfa.backupPrint')}
+                          </button>
+                          <button type="button" onClick={dismissBackupCodes} className="px-3 py-2 rounded-lg text-xs border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                            {t('common.ok')}
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
 
             <div className="flex items-center gap-4">
               <div style={{ position: 'relative', flexShrink: 0 }}>
@@ -643,6 +1325,7 @@ export default function SettingsPage(): React.ReactElement {
               </div>
             </div>
           )}
+          </div>
         </div>
       </div>
     </div>

client/src/pages/SharedTripPage.tsx

@@ -0,0 +1,396 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { MapContainer, TileLayer, Marker, Tooltip, useMap } from 'react-leaflet'
+import L from 'leaflet'
+import { useTranslation, SUPPORTED_LANGUAGES } from '../i18n'
+import { useSettingsStore } from '../store/settingsStore'
+import { getLocaleForLanguage } from '../i18n'
+import { shareApi } from '../api/client'
+import { getCategoryIcon } from '../components/shared/categoryIcons'
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Clock, MapPin, FileText, Train, Plane, Bus, Car, Ship, Ticket, Hotel, Map, Luggage, Wallet, MessageCircle } from 'lucide-react'
+
+const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
+const TRANSPORT_ICONS = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship }
+
+function createMarkerIcon(place: any) {
+  const cat = place.category
+  const color = cat?.color || '#6366f1'
+  const CatIcon = getCategoryIcon(cat?.icon)
+  const iconSvg = renderToStaticMarkup(createElement(CatIcon, { size: 14, strokeWidth: 2, color: 'white' }))
+  return L.divIcon({
+    className: '',
+    iconSize: [28, 28],
+    iconAnchor: [14, 14],
+    html: `<div style="width:28px;height:28px;border-radius:50%;background:${color};display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.3);border:2px solid white;">${iconSvg}</div>`,
+  })
+}
+
+function FitBoundsToPlaces({ places }: { places: any[] }) {
+  const map = useMap()
+  useEffect(() => {
+    if (places.length === 0) return
+    const bounds = L.latLngBounds(places.map(p => [p.lat, p.lng]))
+    map.fitBounds(bounds, { padding: [40, 40], maxZoom: 14 })
+  }, [places, map])
+  return null
+}
+
+export default function SharedTripPage() {
+  const { token } = useParams<{ token: string }>()
+  const { t, locale } = useTranslation()
+  const [data, setData] = useState<any>(null)
+  const [error, setError] = useState(false)
+  const [selectedDay, setSelectedDay] = useState<number | null>(null)
+  const [activeTab, setActiveTab] = useState('plan')
+  const [showLangPicker, setShowLangPicker] = useState(false)
+
+  useEffect(() => {
+    if (!token) return
+    shareApi.getSharedTrip(token).then(setData).catch(() => setError(true))
+  }, [token])
+
+  if (error) return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#f3f4f6' }}>
+      <div style={{ textAlign: 'center', padding: 40 }}>
+        <div style={{ fontSize: 48, marginBottom: 16 }}>🔒</div>
+        <h1 style={{ fontSize: 20, fontWeight: 700, color: '#111827' }}>{t('shared.expired')}</h1>
+        <p style={{ color: '#6b7280', marginTop: 8 }}>{t('shared.expiredHint')}</p>
+      </div>
+    </div>
+  )
+
+  if (!data) return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#f3f4f6' }}>
+      <div style={{ width: 32, height: 32, border: '3px solid #e5e7eb', borderTopColor: '#111827', borderRadius: '50%', animation: 'spin 0.6s linear infinite' }} />
+      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+    </div>
+  )
+
+  const { trip, days, assignments, dayNotes, places, reservations, accommodations, packing, budget, categories, permissions, collab } = data
+  const sortedDays = [...(days || [])].sort((a: any, b: any) => a.day_number - b.day_number)
+
+  // Map places
+  const mapPlaces = selectedDay
+    ? (assignments[String(selectedDay)] || []).map((a: any) => a.place).filter((p: any) => p?.lat && p?.lng)
+    : (places || []).filter((p: any) => p?.lat && p?.lng)
+
+  const center = mapPlaces.length > 0 ? [mapPlaces[0].lat, mapPlaces[0].lng] : [48.85, 2.35]
+
+  return (
+    <div style={{ minHeight: '100vh', background: 'var(--bg-secondary, #f3f4f6)', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+      {/* Header */}
+      <div style={{ background: 'linear-gradient(135deg, #000 0%, #0f172a 50%, #1e293b 100%)', color: 'white', padding: '32px 20px 28px', textAlign: 'center', position: 'relative' }}>
+        {/* Cover image background */}
+        {trip.cover_image && (
+          <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${trip.cover_image.startsWith('http') ? trip.cover_image : trip.cover_image.startsWith('/') ? trip.cover_image : '/uploads/' + trip.cover_image})`, backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.15 }} />
+        )}
+        {/* Background decoration */}
+        <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255,255,255,0.03)' }} />
+        <div style={{ position: 'absolute', bottom: -40, left: -40, width: 150, height: 150, borderRadius: '50%', background: 'rgba(255,255,255,0.02)' }} />
+
+        {/* Logo */}
+        <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, borderRadius: 12, background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(8px)', marginBottom: 12, border: '1px solid rgba(255,255,255,0.1)' }}>
+          <img src="/icons/icon-white.svg" alt="TREK" width="26" height="26" />
+        </div>
+
+        <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 3, textTransform: 'uppercase', opacity: 0.35, marginBottom: 12 }}>Travel Resource & Exploration Kit</div>
+
+        <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>{trip.title}</h1>
+
+        {trip.description && (
+          <div style={{ fontSize: 13, opacity: 0.5, maxWidth: 400, margin: '0 auto', lineHeight: 1.5 }}>{trip.description}</div>
+        )}
+
+        {(trip.start_date || trip.end_date) && (
+          <div style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 20, background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(4px)', border: '1px solid rgba(255,255,255,0.08)' }}>
+            <span style={{ fontSize: 12, fontWeight: 500, opacity: 0.8 }}>
+              {[trip.start_date, trip.end_date].filter(Boolean).map((d: string) => new Date(d + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' })).join(' — ')}
+            </span>
+            {days?.length > 0 && <span style={{ fontSize: 11, opacity: 0.4 }}>·</span>}
+            {days?.length > 0 && <span style={{ fontSize: 11, opacity: 0.5 }}>{days.length} {t('shared.days')}</span>}
+          </div>
+        )}
+
+        <div style={{ marginTop: 12, fontSize: 9, fontWeight: 500, letterSpacing: 1.5, textTransform: 'uppercase', opacity: 0.25 }}>{t('shared.readOnly')}</div>
+
+        {/* Language picker - top right */}
+        <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 10 }}>
+          <button onClick={() => setShowLangPicker(v => !v)} style={{
+            padding: '5px 12px', borderRadius: 20, border: '1px solid rgba(255,255,255,0.15)',
+            background: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(8px)',
+            color: 'rgba(255,255,255,0.7)', fontSize: 11, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
+          }}>
+            {SUPPORTED_LANGUAGES.find(l => l.value === (locale?.split('-')[0] || 'en'))?.label || 'Language'}
+          </button>
+          {showLangPicker && (
+            <div style={{ position: 'absolute', top: '100%', right: 0, marginTop: 6, background: 'white', borderRadius: 10, boxShadow: '0 4px 16px rgba(0,0,0,0.2)', padding: 4, zIndex: 50, minWidth: 150 }}>
+              {SUPPORTED_LANGUAGES.map(lang => (
+                <button key={lang.value} onClick={() => {
+                  // Set language locally without API call (shared page has no auth)
+                  useSettingsStore.setState(s => ({ settings: { ...s.settings, language: lang.value } }))
+                  setShowLangPicker(false)
+                }}
+                  style={{ display: 'block', width: '100%', padding: '6px 12px', border: 'none', background: 'none', textAlign: 'left', cursor: 'pointer', fontSize: 12, color: '#374151', borderRadius: 6, fontFamily: 'inherit' }}
+                  onMouseEnter={e => e.currentTarget.style.background = '#f3f4f6'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                >{lang.label}</button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div style={{ maxWidth: 900, margin: '0 auto', padding: '20px 16px' }}>
+        {/* Tabs */}
+        <div style={{ display: 'flex', gap: 6, marginBottom: 20, overflowX: 'auto', padding: '2px 0' }}>
+          {[
+            { id: 'plan', label: t('shared.tabPlan'), Icon: Map },
+            ...(permissions?.share_bookings ? [{ id: 'bookings', label: t('shared.tabBookings'), Icon: Ticket }] : []),
+            ...(permissions?.share_packing ? [{ id: 'packing', label: t('shared.tabPacking'), Icon: Luggage }] : []),
+            ...(permissions?.share_budget ? [{ id: 'budget', label: t('shared.tabBudget'), Icon: Wallet }] : []),
+            ...(permissions?.share_collab ? [{ id: 'collab', label: t('shared.tabChat'), Icon: MessageCircle }] : []),
+          ].map(tab => (
+            <button key={tab.id} onClick={() => setActiveTab(tab.id)} style={{
+              padding: '8px 18px', borderRadius: 12, border: '1.5px solid', cursor: 'pointer',
+              fontSize: 12, fontWeight: 600, fontFamily: 'inherit', transition: 'all 0.15s', whiteSpace: 'nowrap',
+              display: 'flex', alignItems: 'center', gap: 6,
+              background: activeTab === tab.id ? '#111827' : 'var(--bg-card, white)',
+              borderColor: activeTab === tab.id ? '#111827' : 'var(--border-faint, #e5e7eb)',
+              color: activeTab === tab.id ? 'white' : '#6b7280',
+              boxShadow: activeTab === tab.id ? '0 2px 8px rgba(0,0,0,0.15)' : '0 1px 3px rgba(0,0,0,0.04)',
+            }}><tab.Icon size={13} /><span className="hidden sm:inline">{tab.label}</span></button>
+          ))}
+        </div>
+
+        {/* Map */}
+        {activeTab === 'plan' && (<>
+        <div style={{ borderRadius: 16, overflow: 'hidden', height: 300, marginBottom: 20, boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
+          <MapContainer center={center as [number, number]} zoom={11} zoomControl={false} style={{ width: '100%', height: '100%' }}>
+            <TileLayer url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" referrerPolicy="strict-origin-when-cross-origin" />
+            <FitBoundsToPlaces places={mapPlaces} />
+            {mapPlaces.map((p: any) => (
+              <Marker key={p.id} position={[p.lat, p.lng]} icon={createMarkerIcon(p)}>
+                <Tooltip>{p.name}</Tooltip>
+              </Marker>
+            ))}
+          </MapContainer>
+        </div>
+
+        {/* Day Plan */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {sortedDays.map((day: any, di: number) => {
+            const da = assignments[String(day.id)] || []
+            const notes = (dayNotes[String(day.id)] || [])
+            const dayTransport = (reservations || []).filter((r: any) => TRANSPORT_TYPES.has(r.type) && r.reservation_time?.split('T')[0] === day.date)
+            const dayAccs = (accommodations || []).filter((a: any) => day.id >= a.start_day_id && day.id <= a.end_day_id)
+
+            const merged = [
+              ...da.map((a: any) => ({ type: 'place', k: a.order_index, data: a })),
+              ...notes.map((n: any) => ({ type: 'note', k: n.sort_order ?? 0, data: n })),
+              ...dayTransport.map((r: any) => ({ type: 'transport', k: r.day_plan_position ?? 999, data: r })),
+            ].sort((a, b) => a.k - b.k)
+
+            return (
+              <div key={day.id} style={{ background: 'var(--bg-card, white)', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--border-faint, #e5e7eb)' }}>
+                <div onClick={() => setSelectedDay(selectedDay === day.id ? null : day.id)}
+                  style={{ padding: '12px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}>
+                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: selectedDay === day.id ? '#111827' : '#f3f4f6', color: selectedDay === day.id ? 'white' : '#6b7280', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, flexShrink: 0 }}>{di + 1}</div>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ fontSize: 14, fontWeight: 600, color: '#111827' }}>{day.title || `Day ${day.day_number}`}</div>
+                    {day.date && <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 1 }}>{new Date(day.date + 'T00:00:00').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })}</div>}
+                  </div>
+                  {dayAccs.map((acc: any) => (
+                    <span key={acc.id} style={{ fontSize: 9, padding: '2px 6px', borderRadius: 4, background: '#f3f4f6', color: '#6b7280', display: 'flex', alignItems: 'center', gap: 3 }}>
+                      <Hotel size={8} /> {acc.place_name}
+                    </span>
+                  ))}
+                  <span style={{ fontSize: 11, color: '#9ca3af' }}>{da.length} {t('shared.places')}</span>
+                </div>
+
+                {selectedDay === day.id && merged.length > 0 && (
+                  <div style={{ padding: '0 16px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    {merged.map((item: any, idx: number) => {
+                      if (item.type === 'transport') {
+                        const r = item.data
+                        const TIcon = TRANSPORT_ICONS[r.type] || Ticket
+                        const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
+                        const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
+                        let sub = ''
+                        if (r.type === 'flight') sub = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+                        else if (r.type === 'train') sub = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : ''].filter(Boolean).join(' · ')
+                        return (
+                          <div key={`t-${r.id}`} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 6, background: 'rgba(59,130,246,0.06)', border: '1px solid rgba(59,130,246,0.15)' }}>
+                            <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'rgba(59,130,246,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                              <TIcon size={12} color="#3b82f6" />
+                            </div>
+                            <div style={{ flex: 1, minWidth: 0 }}>
+                              <div style={{ fontSize: 12, fontWeight: 500, color: '#111827' }}>{r.title}{time ? ` · ${time}` : ''}</div>
+                              {sub && <div style={{ fontSize: 10, color: '#6b7280' }}>{sub}</div>}
+                            </div>
+                          </div>
+                        )
+                      }
+                      if (item.type === 'note') {
+                        return (
+                          <div key={`n-${item.data.id}`} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 8px', borderRadius: 6, background: '#f9fafb', border: '1px solid #f3f4f6' }}>
+                            <FileText size={12} color="#9ca3af" />
+                            <div>
+                              <div style={{ fontSize: 12, color: '#374151' }}>{item.data.text}</div>
+                              {item.data.time && <div style={{ fontSize: 10, color: '#9ca3af' }}>{item.data.time}</div>}
+                            </div>
+                          </div>
+                        )
+                      }
+                      const place = item.data.place
+                      if (!place) return null
+                      const cat = categories?.find((c: any) => c.id === place.category_id)
+                      return (
+                        <div key={`p-${item.data.id}`} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 8px', borderRadius: 6 }}>
+                          <div style={{ width: 28, height: 28, borderRadius: '50%', background: cat?.color || '#6366f1', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                            {place.image_url ? <img src={place.image_url} style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover' }} /> : <MapPin size={13} color="white" />}
+                          </div>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <div style={{ fontSize: 12.5, fontWeight: 500, color: '#111827' }}>{place.name}</div>
+                            {(place.address || place.description) && <div style={{ fontSize: 10, color: '#9ca3af', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{place.address || place.description}</div>}
+                          </div>
+                          {place.place_time && <span style={{ fontSize: 10, color: '#6b7280', display: 'flex', alignItems: 'center', gap: 3, flexShrink: 0 }}><Clock size={9} />{place.place_time}{place.end_time ? ` – ${place.end_time}` : ''}</span>}
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+        </>)}
+
+        {/* Bookings */}
+        {activeTab === 'bookings' && (reservations || []).length > 0 && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {(reservations || []).map((r: any) => {
+              const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
+              const TIcon = TRANSPORT_ICONS[r.type] || Ticket
+              const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
+              const date = r.reservation_time ? new Date(r.reservation_time.includes('T') ? r.reservation_time : r.reservation_time + 'T00:00:00').toLocaleDateString(locale, { day: 'numeric', month: 'short' }) : ''
+              return (
+                <div key={r.id} style={{ background: 'var(--bg-card, white)', borderRadius: 10, padding: '12px 16px', border: '1px solid var(--border-faint, #e5e7eb)', display: 'flex', alignItems: 'center', gap: 12 }}>
+                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#f3f4f6', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                    <TIcon size={15} color="#6b7280" />
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 13, fontWeight: 600, color: '#111827' }}>{r.title}</div>
+                    <div style={{ fontSize: 11, color: '#9ca3af', display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 2 }}>
+                      {date && <span>{date}</span>}
+                      {time && <span>{time}</span>}
+                      {r.location && <span>{r.location}</span>}
+                      {meta.airline && <span>{meta.airline} {meta.flight_number || ''}</span>}
+                      {meta.train_number && <span>{meta.train_number}</span>}
+                    </div>
+                  </div>
+                  <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 20, fontWeight: 600, background: r.status === 'confirmed' ? 'rgba(22,163,74,0.1)' : 'rgba(217,119,6,0.1)', color: r.status === 'confirmed' ? '#16a34a' : '#d97706' }}>
+                    {r.status === 'confirmed' ? t('shared.confirmed') : t('shared.pending')}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Packing */}
+        {activeTab === 'packing' && (packing || []).length > 0 && (
+          <div style={{ background: 'var(--bg-card, white)', borderRadius: 14, border: '1px solid var(--border-faint, #e5e7eb)', overflow: 'hidden' }}>
+            {Object.entries((packing || []).reduce((g: any, i: any) => { const c = i.category || t('shared.other'); (g[c] = g[c] || []).push(i); return g }, {})).map(([cat, items]: [string, any]) => (
+              <div key={cat}>
+                <div style={{ padding: '8px 16px', background: '#f9fafb', fontSize: 11, fontWeight: 700, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em', borderBottom: '1px solid #f3f4f6' }}>{cat}</div>
+                {items.map((item: any) => (
+                  <div key={item.id} style={{ padding: '6px 16px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid #f9fafb' }}>
+                    <span style={{ fontSize: 13, color: item.checked ? '#9ca3af' : '#111827', textDecoration: item.checked ? 'line-through' : 'none' }}>{item.name}</span>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Budget */}
+        {activeTab === 'budget' && (budget || []).length > 0 && (() => {
+          const grouped = (budget || []).reduce((g: any, i: any) => { const c = i.category || t('shared.other'); (g[c] = g[c] || []).push(i); return g }, {})
+          const total = (budget || []).reduce((s: number, i: any) => s + (parseFloat(i.total_price) || 0), 0)
+          return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              {/* Total card */}
+              <div style={{ background: 'linear-gradient(135deg, #000 0%, #1a1a2e 100%)', borderRadius: 14, padding: '20px 24px', color: 'white' }}>
+                <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: 1, textTransform: 'uppercase', opacity: 0.5 }}>{t('shared.totalBudget')}</div>
+                <div style={{ fontSize: 28, fontWeight: 700, marginTop: 4 }}>{total.toLocaleString(locale, { minimumFractionDigits: 2 })} {trip.currency || 'EUR'}</div>
+              </div>
+              {/* By category */}
+              {Object.entries(grouped).map(([cat, items]: [string, any]) => (
+                <div key={cat} style={{ background: 'var(--bg-card, white)', borderRadius: 12, border: '1px solid var(--border-faint, #e5e7eb)', overflow: 'hidden' }}>
+                  <div style={{ padding: '10px 16px', background: '#f9fafb', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #f3f4f6' }}>
+                    <span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>{cat}</span>
+                    <span style={{ fontSize: 12, fontWeight: 600, color: '#6b7280' }}>{items.reduce((s: number, i: any) => s + (parseFloat(i.total_price) || 0), 0).toLocaleString(locale, { minimumFractionDigits: 2 })} {trip.currency || ''}</span>
+                  </div>
+                  {items.map((item: any) => (
+                    <div key={item.id} style={{ padding: '8px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #fafafa' }}>
+                      <span style={{ fontSize: 13, color: '#111827' }}>{item.name}</span>
+                      <span style={{ fontSize: 13, fontWeight: 600, color: '#111827' }}>{item.total_price ? Number(item.total_price).toLocaleString(locale, { minimumFractionDigits: 2 }) : '—'}</span>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          )
+        })()}
+
+        {/* Collab Chat */}
+        {activeTab === 'collab' && (collab || []).length > 0 && (
+          <div style={{ background: 'var(--bg-card, white)', borderRadius: 14, border: '1px solid var(--border-faint, #e5e7eb)', overflow: 'hidden' }}>
+            <div style={{ padding: '12px 16px', background: '#f9fafb', borderBottom: '1px solid #f3f4f6', display: 'flex', alignItems: 'center', gap: 8 }}>
+              <MessageCircle size={14} color="#6b7280" />
+              <span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>{t('shared.tabChat')} · {(collab || []).length} {t('shared.messages')}</span>
+            </div>
+            <div style={{ maxHeight: 500, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {(collab || []).map((msg: any, i: number) => {
+                const prevMsg = i > 0 ? collab[i - 1] : null
+                const showDate = !prevMsg || new Date(msg.created_at).toDateString() !== new Date(prevMsg.created_at).toDateString()
+                return (
+                  <div key={msg.id}>
+                    {showDate && (
+                      <div style={{ textAlign: 'center', margin: '8px 0', fontSize: 10, fontWeight: 600, color: '#9ca3af' }}>
+                        {new Date(msg.created_at).toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })}
+                      </div>
+                    )}
+                    <div style={{ display: 'flex', gap: 10 }}>
+                      <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#e5e7eb', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, color: '#6b7280', flexShrink: 0, overflow: 'hidden' }}>
+                        {msg.avatar ? <img src={`/uploads/avatars/${msg.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : (msg.username || '?')[0].toUpperCase()}
+                      </div>
+                      <div style={{ flex: 1 }}>
+                        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
+                          <span style={{ fontSize: 12, fontWeight: 600, color: '#111827' }}>{msg.username}</span>
+                          <span style={{ fontSize: 10, color: '#9ca3af' }}>{new Date(msg.created_at).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' })}</span>
+                        </div>
+                        <div style={{ fontSize: 13, color: '#374151', marginTop: 3, lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>{msg.text}</div>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div style={{ textAlign: 'center', padding: '40px 0 20px' }}>
+          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 16px', borderRadius: 20, background: 'var(--bg-card, white)', border: '1px solid var(--border-faint, #e5e7eb)', boxShadow: '0 1px 3px rgba(0,0,0,0.04)' }}>
+            <img src="/icons/icon.svg" alt="TREK" width="18" height="18" style={{ borderRadius: 4 }} />
+            <span style={{ fontSize: 11, color: '#9ca3af' }}>{t('shared.sharedVia')} <strong style={{ color: '#6b7280' }}>TREK</strong></span>
+          </div>
+          <div style={{ marginTop: 8, fontSize: 10, color: '#d1d5db' }}>Made with <span style={{ color: '#ef4444' }}>&hearts;</span> by Maurice · <a href="https://github.com/mauriceboe/TREK" style={{ color: '#9ca3af', textDecoration: 'none' }}>GitHub</a></div>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/pages/TripPlannerPage.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import ReactDOM from 'react-dom'
 import { useParams, useNavigate } from 'react-router-dom'
 import { useTripStore } from '../store/tripStore'
+import { useCanDo } from '../store/permissionsStore'
 import { useSettingsStore } from '../store/settingsStore'
 import { MapView } from '../components/Map/MapView'
+import { getCached, fetchPhoto } from '../services/photoService'
 import DayPlanSidebar from '../components/Planner/DayPlanSidebar'
 import PlacesSidebar from '../components/Planner/PlacesSidebar'
 import PlaceInspector from '../components/Planner/PlaceInspector'
@@ -12,6 +14,7 @@ import PlaceFormModal from '../components/Planner/PlaceFormModal'
 import TripFormModal from '../components/Trips/TripFormModal'
 import TripMembersModal from '../components/Trips/TripMembersModal'
 import { ReservationModal } from '../components/Planner/ReservationModal'
+import MemoriesPanel from '../components/Memories/MemoriesPanel'
 import ReservationsPanel from '../components/Planner/ReservationsPanel'
 import PackingListPanel from '../components/Packing/PackingListPanel'
 import FileManager from '../components/Files/FileManager'
@@ -21,7 +24,7 @@ import Navbar from '../components/Layout/Navbar'
 import { useToast } from '../components/shared/Toast'
 import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react'
 import { useTranslation } from '../i18n'
-import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi } from '../api/client'
+import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, mapsApi } from '../api/client'
 import ConfirmDialog from '../components/shared/ConfirmDialog'
 import { useResizablePanels } from '../hooks/useResizablePanels'
 import { useTripWebSocket } from '../hooks/useTripWebSocket'
@@ -35,8 +38,21 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const toast = useToast()
   const { t, language } = useTranslation()
   const { settings } = useSettingsStore()
-  const tripStore = useTripStore()
-  const { trip, days, places, assignments, packingItems, categories, reservations, budgetItems, files, selectedDayId, isLoading } = tripStore
+  const trip = useTripStore(s => s.trip)
+  const days = useTripStore(s => s.days)
+  const places = useTripStore(s => s.places)
+  const assignments = useTripStore(s => s.assignments)
+  const packingItems = useTripStore(s => s.packingItems)
+  const categories = useTripStore(s => s.categories)
+  const reservations = useTripStore(s => s.reservations)
+  const budgetItems = useTripStore(s => s.budgetItems)
+  const files = useTripStore(s => s.files)
+  const selectedDayId = useTripStore(s => s.selectedDayId)
+  const isLoading = useTripStore(s => s.isLoading)
+  // Actions — stable references, don't cause re-renders
+  const tripActions = useRef(useTripStore.getState()).current
+  const can = useCanDo()
+  const canUploadFiles = can('file_upload', trip)
 
   const [enabledAddons, setEnabledAddons] = useState<Record<string, boolean>>({ packing: true, budget: true, documents: true })
   const [tripAccommodations, setTripAccommodations] = useState<Accommodation[]>([])
@@ -46,7 +62,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const loadAccommodations = useCallback(() => {
     if (tripId) {
       accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
-      tripStore.loadReservations(tripId)
+      tripActions.loadReservations(tripId)
     }
   }, [tripId])
 
@@ -54,7 +70,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
     addonsApi.enabled().then(data => {
       const map = {}
       data.addons.forEach(a => { map[a.id] = true })
-      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents, collab: !!map.collab })
+      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents, collab: !!map.collab, memories: !!map.memories })
     }).catch(() => {})
     authApi.getAppConfig().then(config => {
       if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)
@@ -67,7 +83,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
     ...(enabledAddons.packing ? [{ id: 'packliste', label: t('trip.tabs.packing'), shortLabel: t('trip.tabs.packingShort') }] : []),
     ...(enabledAddons.budget ? [{ id: 'finanzplan', label: t('trip.tabs.budget') }] : []),
     ...(enabledAddons.documents ? [{ id: 'dateien', label: t('trip.tabs.files') }] : []),
-    ...(enabledAddons.collab ? [{ id: 'collab', label: 'Collab' }] : []),
+    ...(enabledAddons.memories ? [{ id: 'memories', label: t('memories.title') }] : []),
+    ...(enabledAddons.collab ? [{ id: 'collab', label: t('admin.addons.catalog.collab.name') }] : []),
   ]
 
   const [activeTab, setActiveTab] = useState<string>(() => {
@@ -78,8 +95,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const handleTabChange = (tabId: string): void => {
     setActiveTab(tabId)
     sessionStorage.setItem(`trip-tab-${tripId}`, tabId)
-    if (tabId === 'finanzplan') tripStore.loadBudgetItems?.(tripId)
-    if (tabId === 'dateien' && (!files || files.length === 0)) tripStore.loadFiles?.(tripId)
+    if (tabId === 'finanzplan') tripActions.loadBudgetItems?.(tripId)
+    if (tabId === 'dateien' && (!files || files.length === 0)) tripActions.loadFiles?.(tripId)
   }
   const { leftWidth, rightWidth, leftCollapsed, rightCollapsed, setLeftCollapsed, setRightCollapsed, startResizeLeft, startResizeRight } = useResizablePanels()
   const { selectedPlaceId, selectedAssignmentId, setSelectedPlaceId, selectAssignment } = usePlaceSelection()
@@ -96,11 +113,33 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState<'left' | 'right' | null>(null)
   const [deletePlaceId, setDeletePlaceId] = useState<number | null>(null)
 
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 767px)')
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
+  // Start photo fetches during splash screen so images are ready when map mounts
+  useEffect(() => {
+    if (isLoading || !places || places.length === 0) return
+    for (const p of places) {
+      if (p.image_url) continue
+      const cacheKey = p.google_place_id || p.osm_id || `${p.lat},${p.lng}`
+      if (!cacheKey || getCached(cacheKey)) continue
+      const photoId = p.google_place_id || p.osm_id
+      if (photoId || (p.lat && p.lng)) {
+        fetchPhoto(cacheKey, photoId || `coords:${p.lat}:${p.lng}`, p.lat, p.lng, p.name)
+      }
+    }
+  }, [isLoading, places])
+
   // Load trip + files (needed for place inspector file section)
   useEffect(() => {
     if (tripId) {
-      tripStore.loadTrip(tripId).catch(() => { toast.error(t('trip.toast.loadError')); navigate('/dashboard') })
-      tripStore.loadFiles(tripId)
+      tripActions.loadTrip(tripId).catch(() => { toast.error(t('trip.toast.loadError')); navigate('/dashboard') })
+      tripActions.loadFiles(tripId)
       loadAccommodations()
       tripsApi.getMembers(tripId).then(d => {
         // Combine owner + members into one list
@@ -111,24 +150,53 @@ export default function TripPlannerPage(): React.ReactElement | null {
   }, [tripId])
 
   useEffect(() => {
-    if (tripId) tripStore.loadReservations(tripId)
+    if (tripId) tripActions.loadReservations(tripId)
   }, [tripId])
 
   useTripWebSocket(tripId)
 
-  const mapPlaces = useCallback(() => {
-    return places.filter(p => p.lat && p.lng)
-  }, [places])
+  const [mapCategoryFilter, setMapCategoryFilter] = useState<string>('')
 
-  const { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay } = useRouteCalculation(tripStore, selectedDayId)
+  const [expandedDayIds, setExpandedDayIds] = useState<Set<number> | null>(null)
+
+  const mapPlaces = useMemo(() => {
+    // Build set of place IDs assigned to collapsed days
+    const hiddenPlaceIds = new Set<number>()
+    if (expandedDayIds) {
+      for (const [dayId, dayAssignments] of Object.entries(assignments)) {
+        if (!expandedDayIds.has(Number(dayId))) {
+          for (const a of dayAssignments) {
+            if (a.place?.id) hiddenPlaceIds.add(a.place.id)
+          }
+        }
+      }
+      // Don't hide places that are also assigned to an expanded day
+      for (const [dayId, dayAssignments] of Object.entries(assignments)) {
+        if (expandedDayIds.has(Number(dayId))) {
+          for (const a of dayAssignments) {
+            hiddenPlaceIds.delete(a.place?.id)
+          }
+        }
+      }
+    }
+
+    return places.filter(p => {
+      if (!p.lat || !p.lng) return false
+      if (mapCategoryFilter && String(p.category_id) !== String(mapCategoryFilter)) return false
+      if (hiddenPlaceIds.has(p.id)) return false
+      return true
+    })
+  }, [places, mapCategoryFilter, assignments, expandedDayIds])
+
+  const { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay } = useRouteCalculation({ assignments } as any, selectedDayId)
 
   const handleSelectDay = useCallback((dayId, skipFit) => {
     const changed = dayId !== selectedDayId
-    tripStore.setSelectedDay(dayId)
+    tripActions.setSelectedDay(dayId)
     if (changed && !skipFit) setFitKey(k => k + 1)
     setMobileSidebarOpen(null)
     updateRouteForDay(dayId)
-  }, [tripStore, updateRouteForDay, selectedDayId])
+  }, [updateRouteForDay, selectedDayId])
 
   const handlePlaceClick = useCallback((placeId, assignmentId) => {
     if (assignmentId) {
@@ -150,6 +218,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
   }, [])
 
   const handleMapContextMenu = useCallback(async (e) => {
+    if (!can('place_edit', trip)) return
     e.originalEvent?.preventDefault()
     const { lat, lng } = e.latlng
     setPrefillCoords({ lat, lng })
@@ -171,11 +240,11 @@ export default function TripPlannerPage(): React.ReactElement | null {
     if (editingPlace) {
       // Always strip time fields from place update — time is per-assignment only
       const { place_time, end_time, ...placeData } = data
-      await tripStore.updatePlace(tripId, editingPlace.id, placeData)
+      await tripActions.updatePlace(tripId, editingPlace.id, placeData)
       // If editing from assignment context, save time per-assignment
       if (editingAssignmentId) {
         await assignmentsApi.updateTime(tripId, editingAssignmentId, { place_time: place_time || null, end_time: end_time || null })
-        await tripStore.refreshDays(tripId)
+        await tripActions.refreshDays(tripId)
       }
       // Upload pending files with place_id
       if (pendingFiles?.length > 0) {
@@ -183,23 +252,23 @@ export default function TripPlannerPage(): React.ReactElement | null {
           const fd = new FormData()
           fd.append('file', file)
           fd.append('place_id', editingPlace.id)
-          try { await tripStore.addFile(tripId, fd) } catch {}
+          try { await tripActions.addFile(tripId, fd) } catch {}
         }
       }
       toast.success(t('trip.toast.placeUpdated'))
     } else {
-      const place = await tripStore.addPlace(tripId, data)
+      const place = await tripActions.addPlace(tripId, data)
       if (pendingFiles?.length > 0 && place?.id) {
         for (const file of pendingFiles) {
           const fd = new FormData()
           fd.append('file', file)
           fd.append('place_id', place.id)
-          try { await tripStore.addFile(tripId, fd) } catch {}
+          try { await tripActions.addFile(tripId, fd) } catch {}
         }
       }
       toast.success(t('trip.toast.placeAdded'))
     }
-  }, [editingPlace, editingAssignmentId, tripId, tripStore, toast])
+  }, [editingPlace, editingAssignmentId, tripId, toast])
 
   const handleDeletePlace = useCallback((placeId) => {
     setDeletePlaceId(placeId)
@@ -208,34 +277,34 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const confirmDeletePlace = useCallback(async () => {
     if (!deletePlaceId) return
     try {
-      await tripStore.deletePlace(tripId, deletePlaceId)
+      await tripActions.deletePlace(tripId, deletePlaceId)
       if (selectedPlaceId === deletePlaceId) setSelectedPlaceId(null)
       toast.success(t('trip.toast.placeDeleted'))
     } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
-  }, [deletePlaceId, tripId, tripStore, toast, selectedPlaceId])
+  }, [deletePlaceId, tripId, toast, selectedPlaceId])
 
   const handleAssignToDay = useCallback(async (placeId, dayId, position) => {
     const target = dayId || selectedDayId
     if (!target) { toast.error(t('trip.toast.selectDay')); return }
     try {
-      await tripStore.assignPlaceToDay(tripId, target, placeId, position)
+      await tripActions.assignPlaceToDay(tripId, target, placeId, position)
       toast.success(t('trip.toast.assignedToDay'))
       updateRouteForDay(target)
     } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
-  }, [selectedDayId, tripId, tripStore, toast, updateRouteForDay])
+  }, [selectedDayId, tripId, toast, updateRouteForDay])
 
   const handleRemoveAssignment = useCallback(async (dayId, assignmentId) => {
     try {
-      await tripStore.removeAssignment(tripId, dayId, assignmentId)
+      await tripActions.removeAssignment(tripId, dayId, assignmentId)
     }
     catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
-  }, [tripId, tripStore, toast, updateRouteForDay])
+  }, [tripId, toast, updateRouteForDay])
 
   const handleReorder = useCallback((dayId, orderedIds) => {
     try {
-      tripStore.reorderAssignments(tripId, dayId, orderedIds).catch(() => {})
+      tripActions.reorderAssignments(tripId, dayId, orderedIds).catch(() => {})
       // Update route immediately from orderedIds
-      const dayItems = tripStore.assignments[String(dayId)] || []
+      const dayItems = useTripStore.getState().assignments[String(dayId)] || []
       const ordered = orderedIds.map(id => dayItems.find(a => a.id === id)).filter(Boolean)
       const waypoints = ordered.map(a => a.place).filter(p => p?.lat && p?.lng)
       if (waypoints.length >= 2) setRoute(waypoints.map(p => [p.lat, p.lng]))
@@ -243,17 +312,17 @@ export default function TripPlannerPage(): React.ReactElement | null {
       setRouteInfo(null)
     }
     catch { toast.error(t('trip.toast.reorderError')) }
-  }, [tripId, tripStore, toast])
+  }, [tripId, toast])
 
   const handleUpdateDayTitle = useCallback(async (dayId, title) => {
-    try { await tripStore.updateDayTitle(tripId, dayId, title) }
+    try { await tripActions.updateDayTitle(tripId, dayId, title) }
     catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') }
-  }, [tripId, tripStore, toast])
+  }, [tripId, toast])
 
   const handleSaveReservation = async (data) => {
     try {
       if (editingReservation) {
-        const r = await tripStore.updateReservation(tripId, editingReservation.id, data)
+        const r = await tripActions.updateReservation(tripId, editingReservation.id, data)
         toast.success(t('trip.toast.reservationUpdated'))
         setShowReservationModal(false)
         if (data.type === 'hotel') {
@@ -261,7 +330,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
         }
         return r
       } else {
-        const r = await tripStore.addReservation(tripId, { ...data, day_id: selectedDayId || null })
+        const r = await tripActions.addReservation(tripId, { ...data, day_id: selectedDayId || null })
         toast.success(t('trip.toast.reservationAdded'))
         setShowReservationModal(false)
         // Refresh accommodations if hotel was created
@@ -275,7 +344,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
 
   const handleDeleteReservation = async (id) => {
     try {
-      await tripStore.deleteReservation(tripId, id)
+      await tripActions.deleteReservation(tripId, id)
       toast.success(t('trip.toast.deleted'))
       // Refresh accommodations in case a hotel booking was deleted
       accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
@@ -312,12 +381,53 @@ export default function TripPlannerPage(): React.ReactElement | null {
 
   const fontStyle = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif" }
 
-  if (isLoading) {
+  // Splash screen — show for initial load + a brief moment for photos to start loading
+  const [splashDone, setSplashDone] = useState(false)
+  useEffect(() => {
+    if (!isLoading && trip) {
+      const timer = setTimeout(() => setSplashDone(true), 1500)
+      return () => clearTimeout(timer)
+    }
+  }, [isLoading, trip])
+
+  if (isLoading || !splashDone) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f9fafb', ...fontStyle }}>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
-          <div style={{ width: 32, height: 32, border: '3px solid rgba(0,0,0,0.1)', borderTopColor: '#111827', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
-          <span style={{ fontSize: 13, color: '#9ca3af' }}>{t('trip.loading')}</span>
+      <div style={{
+        minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+        background: 'var(--bg-primary)', ...fontStyle,
+      }}>
+        <style>{`
+          @keyframes planeFloat {
+            0%, 100% { transform: translateY(0px) rotate(-2deg); }
+            50% { transform: translateY(-12px) rotate(2deg); }
+          }
+          @keyframes dotPulse {
+            0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+            40% { opacity: 1; transform: scale(1); }
+          }
+          @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+        `}</style>
+        <div style={{ animation: 'planeFloat 2.5s ease-in-out infinite', marginBottom: 28 }}>
+          <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--text-primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.8 }}>
+            <path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z" />
+          </svg>
+        </div>
+        <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', letterSpacing: '-0.3px', marginBottom: 6, animation: 'fadeInUp 0.5s ease-out' }}>
+          {trip?.title || 'TREK'}
+        </div>
+        <div style={{ fontSize: 12, color: 'var(--text-faint)', fontWeight: 500, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 32, animation: 'fadeInUp 0.5s ease-out 0.1s both' }}>
+          {t('trip.loadingPhotos')}
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          {[0, 1, 2].map(i => (
+            <div key={i} style={{
+              width: 8, height: 8, borderRadius: '50%', background: 'var(--text-muted)',
+              animation: `dotPulse 1.4s ease-in-out ${i * 0.2}s infinite`,
+            }} />
+          ))}
         </div>
       </div>
     )
@@ -370,7 +480,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
         {activeTab === 'plan' && (
           <div style={{ position: 'absolute', inset: 0 }}>
             <MapView
-              places={mapPlaces()}
+              places={mapPlaces}
               dayPlaces={dayPlaces}
               route={route}
               routeSegments={routeSegments}
@@ -432,12 +542,14 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   onAssignToDay={handleAssignToDay}
                   onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText, walkingText: r.walkingText, drivingText: r.drivingText }) } else { setRoute(null); setRouteInfo(null) } }}
                   reservations={reservations}
-                  onAddReservation={(dayId) => { setEditingReservation(null); tripStore.setSelectedDay(dayId); setShowReservationModal(true) }}
+                  onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true) }}
                   onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }}
                   onRemoveAssignment={handleRemoveAssignment}
                   onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true) }}
                   onDeletePlace={(placeId) => handleDeletePlace(placeId)}
                   accommodations={tripAccommodations}
+                  onNavigateToFiles={() => handleTabChange('dateien')}
+                  onExpandedDaysChange={setExpandedDayIds}
                 />
                 {!leftCollapsed && (
                   <div
@@ -486,6 +598,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                 )}
                 <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', paddingLeft: 4 }}>
                   <PlacesSidebar
+                    tripId={tripId}
                     places={places}
                     categories={categories}
                     assignments={assignments}
@@ -496,6 +609,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                     onAssignToDay={handleAssignToDay}
                     onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true) }}
                     onDeletePlace={(placeId) => handleDeletePlace(placeId)}
+                    onCategoryFilterChange={setMapCategoryFilter}
                   />
                 </div>
               </div>
@@ -533,11 +647,13 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   lng={geoPlace?.lng}
                   onClose={() => setShowDayDetail(null)}
                   onAccommodationChange={loadAccommodations}
+                  leftWidth={isMobile ? 0 : (leftCollapsed ? 0 : leftWidth)}
+                  rightWidth={isMobile ? 0 : (rightCollapsed ? 0 : rightWidth)}
                 />
               )
             })()}
 
-            {selectedPlace && (
+            {selectedPlace && !isMobile && (
               <PlaceInspector
                 place={selectedPlace}
                 categories={categories}
@@ -548,7 +664,6 @@ export default function TripPlannerPage(): React.ReactElement | null {
                 reservations={reservations}
                 onClose={() => setSelectedPlaceId(null)}
                 onEdit={() => {
-                  // When editing from assignment context, use assignment-level times
                   if (selectedAssignmentId) {
                     const assignmentObj = Object.values(assignments).flat().find(a => a.id === selectedAssignmentId)
                     const placeWithAssignmentTimes = assignmentObj?.place ? { ...selectedPlace, place_time: assignmentObj.place.place_time, end_time: assignmentObj.place.end_time } : selectedPlace
@@ -563,7 +678,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                 onAssignToDay={handleAssignToDay}
                 onRemoveAssignment={handleRemoveAssignment}
                 files={files}
-                onFileUpload={(fd) => tripStore.addFile(tripId, fd)}
+                onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined}
                 tripMembers={tripMembers}
                 onSetParticipants={async (assignmentId, dayId, userIds) => {
                   try {
@@ -578,10 +693,64 @@ export default function TripPlannerPage(): React.ReactElement | null {
                     }))
                   } catch {}
                 }}
-                onUpdatePlace={async (placeId, data) => { try { await tripStore.updatePlace(tripId, placeId, data) } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') } }}
+                onUpdatePlace={async (placeId, data) => { try { await tripActions.updatePlace(tripId, placeId, data) } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') } }}
+                leftWidth={(isMobile || window.innerWidth < 900) ? 0 : (leftCollapsed ? 0 : leftWidth)}
+                rightWidth={(isMobile || window.innerWidth < 900) ? 0 : (rightCollapsed ? 0 : rightWidth)}
               />
             )}
 
+            {selectedPlace && isMobile && ReactDOM.createPortal(
+              <div style={{ position: 'fixed', inset: 0, zIndex: 9999, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', background: 'rgba(0,0,0,0.3)' }} onClick={() => setSelectedPlaceId(null)}>
+                <div style={{ width: '100%', maxHeight: '85vh' }} onClick={e => e.stopPropagation()}>
+                  <PlaceInspector
+                    place={selectedPlace}
+                    categories={categories}
+                    days={days}
+                    selectedDayId={selectedDayId}
+                    selectedAssignmentId={selectedAssignmentId}
+                    assignments={assignments}
+                    reservations={reservations}
+                    onClose={() => setSelectedPlaceId(null)}
+                    onEdit={() => {
+                      if (selectedAssignmentId) {
+                        const assignmentObj = Object.values(assignments).flat().find(a => a.id === selectedAssignmentId)
+                        const placeWithAssignmentTimes = assignmentObj?.place ? { ...selectedPlace, place_time: assignmentObj.place.place_time, end_time: assignmentObj.place.end_time } : selectedPlace
+                        setEditingPlace(placeWithAssignmentTimes)
+                      } else {
+                        setEditingPlace(selectedPlace)
+                      }
+                      setEditingAssignmentId(selectedAssignmentId || null)
+                      setShowPlaceForm(true)
+                      setSelectedPlaceId(null)
+                    }}
+                    onDelete={() => { handleDeletePlace(selectedPlace.id); setSelectedPlaceId(null) }}
+                    onAssignToDay={handleAssignToDay}
+                    onRemoveAssignment={handleRemoveAssignment}
+                    files={files}
+                    onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined}
+                    tripMembers={tripMembers}
+                    onSetParticipants={async (assignmentId, dayId, userIds) => {
+                      try {
+                        const data = await assignmentsApi.setParticipants(tripId, assignmentId, userIds)
+                        useTripStore.setState(state => ({
+                          assignments: {
+                            ...state.assignments,
+                            [String(dayId)]: (state.assignments[String(dayId)] || []).map(a =>
+                              a.id === assignmentId ? { ...a, participants: data.participants } : a
+                            ),
+                          }
+                        }))
+                      } catch {}
+                    }}
+                    onUpdatePlace={async (placeId, data) => { try { await tripActions.updatePlace(tripId, placeId, data) } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Unknown error') } }}
+                    leftWidth={0}
+                    rightWidth={0}
+                  />
+                </div>
+              </div>,
+              document.body
+            )}
+
             {mobileSidebarOpen && ReactDOM.createPortal(
               <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 9999 }} onClick={() => setMobileSidebarOpen(null)}>
                 <div style={{ position: 'absolute', top: 'var(--nav-h)', left: 0, right: 0, bottom: 0, background: 'var(--bg-card)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }} onClick={e => e.stopPropagation()}>
@@ -593,8 +762,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   </div>
                   <div style={{ flex: 1, overflow: 'auto' }}>
                     {mobileSidebarOpen === 'left'
-                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={handlePlaceClick} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} onAddReservation={(dayId) => { setEditingReservation(null); tripStore.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); setSelectedAssignmentId(null); setMobileSidebarOpen(null) }} accommodations={tripAccommodations} />
-                      : <PlacesSidebar places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={handlePlaceClick} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} days={days} isMobile />
+                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId); setMobileSidebarOpen(null) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); setSelectedAssignmentId(null); setMobileSidebarOpen(null) }} accommodations={tripAccommodations} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} />
+                      : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} />
                     }
                   </div>
                 </div>
@@ -636,9 +805,9 @@ export default function TripPlannerPage(): React.ReactElement | null {
           <div style={{ height: '100%', overflow: 'hidden', overscrollBehavior: 'contain' }}>
             <FileManager
               files={files || []}
-              onUpload={(fd) => tripStore.addFile(tripId, fd)}
-              onDelete={(id) => tripStore.deleteFile(tripId, id)}
-              onUpdate={(id, data) => tripStore.loadFiles(tripId)}
+              onUpload={(fd) => tripActions.addFile(tripId, fd)}
+              onDelete={(id) => tripActions.deleteFile(tripId, id)}
+              onUpdate={(id, data) => tripActions.loadFiles(tripId)}
               places={places}
               days={days}
               assignments={assignments}
@@ -649,6 +818,12 @@ export default function TripPlannerPage(): React.ReactElement | null {
           </div>
         )}
 
+        {activeTab === 'memories' && (
+          <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+            <MemoriesPanel tripId={Number(tripId)} startDate={trip?.start_date || null} endDate={trip?.end_date || null} />
+          </div>
+        )}
+
         {activeTab === 'collab' && (
           <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
             <CollabPanel tripId={tripId} tripMembers={tripMembers} />
@@ -656,10 +831,10 @@ export default function TripPlannerPage(): React.ReactElement | null {
         )}
       </div>
 
-      <PlaceFormModal isOpen={showPlaceForm} onClose={() => { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingAssignmentId ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripStore.addCategory?.(cat)} />
-      <TripFormModal isOpen={showTripForm} onClose={() => setShowTripForm(false)} onSave={async (data) => { await tripStore.updateTrip(tripId, data); toast.success(t('trip.toast.tripUpdated')) }} trip={trip} />
+      <PlaceFormModal isOpen={showPlaceForm} onClose={() => { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingAssignmentId ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripActions.addCategory?.(cat)} />
+      <TripFormModal isOpen={showTripForm} onClose={() => setShowTripForm(false)} onSave={async (data) => { await tripActions.updateTrip(tripId, data); toast.success(t('trip.toast.tripUpdated')) }} trip={trip} />
       <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
-      <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={(fd) => tripStore.addFile(tripId, fd)} onFileDelete={(id) => tripStore.deleteFile(tripId, id)} accommodations={tripAccommodations} />
+      <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} />
       <ConfirmDialog
         isOpen={!!deletePlaceId}
         onClose={() => setDeletePlaceId(null)}

client/src/pages/VacayPage.tsx

@@ -104,7 +104,12 @@ export default function VacayPage(): React.ReactElement {
         <div className="rounded-xl border p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
           <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--text-faint)' }}>{t('vacay.legend')}</span>
           <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1.5">
-            {plan?.holidays_enabled && <LegendItem color="#fecaca" label={t('vacay.publicHoliday')} />}
+            {plan?.holidays_enabled && (plan?.holiday_calendars ?? []).length === 0 && (
+              <LegendItem color="#fecaca" label={t('vacay.publicHoliday')} />
+            )}
+            {plan?.holidays_enabled && (plan?.holiday_calendars ?? []).map(cal => (
+              <LegendItem key={cal.id} color={cal.color} label={cal.label || cal.region} />
+            ))}
             {plan?.company_holidays_enabled && <LegendItem color="#fde68a" label={t('vacay.companyHoliday')} />}
             {plan?.block_weekends && <LegendItem color="#e5e7eb" label={t('vacay.weekend')} />}
           </div>
@@ -128,7 +133,7 @@ export default function VacayPage(): React.ReactElement {
                 <CalendarDays size={18} style={{ color: 'var(--text-primary)' }} />
               </div>
               <div>
-                <h1 className="text-lg sm:text-xl font-bold" style={{ color: 'var(--text-primary)' }}>Vacay</h1>
+                <h1 className="text-lg sm:text-xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('admin.addons.catalog.vacay.name')}</h1>
                 <p className="text-xs hidden sm:block" style={{ color: 'var(--text-muted)' }}>{t('vacay.subtitle')}</p>
               </div>
             </div>

client/src/services/photoService.ts

@@ -0,0 +1,128 @@
+import { mapsApi } from '../api/client'
+
+// Shared photo cache — used by PlaceAvatar (sidebar) and MapView (map markers)
+interface PhotoEntry {
+  photoUrl: string | null
+  thumbDataUrl: string | null
+}
+
+const cache = new Map<string, PhotoEntry>()
+const inFlight = new Set<string>()
+const listeners = new Map<string, Set<(entry: PhotoEntry) => void>>()
+// Separate thumb listeners — called when thumbDataUrl becomes available after initial load
+const thumbListeners = new Map<string, Set<(thumb: string) => void>>()
+
+function notify(key: string, entry: PhotoEntry) {
+  listeners.get(key)?.forEach(fn => fn(entry))
+  listeners.delete(key)
+}
+
+function notifyThumb(key: string, thumb: string) {
+  thumbListeners.get(key)?.forEach(fn => fn(thumb))
+  thumbListeners.delete(key)
+}
+
+export function onPhotoLoaded(key: string, fn: (entry: PhotoEntry) => void): () => void {
+  if (!listeners.has(key)) listeners.set(key, new Set())
+  listeners.get(key)!.add(fn)
+  return () => { listeners.get(key)?.delete(fn) }
+}
+
+// Subscribe to thumb availability — called when base64 thumb is ready (may be after photoUrl)
+export function onThumbReady(key: string, fn: (thumb: string) => void): () => void {
+  if (!thumbListeners.has(key)) thumbListeners.set(key, new Set())
+  thumbListeners.get(key)!.add(fn)
+  return () => { thumbListeners.get(key)?.delete(fn) }
+}
+
+export function getCached(key: string): PhotoEntry | undefined {
+  return cache.get(key)
+}
+
+export function isLoading(key: string): boolean {
+  return inFlight.has(key)
+}
+
+// Convert image URL to base64 via canvas (CORS required — Wikimedia supports it)
+export function urlToBase64(url: string, size: number = 48): Promise<string | null> {
+  return new Promise(resolve => {
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas')
+        canvas.width = size
+        canvas.height = size
+        const ctx = canvas.getContext('2d')!
+        const s = Math.min(img.naturalWidth, img.naturalHeight)
+        const sx = (img.naturalWidth - s) / 2
+        const sy = (img.naturalHeight - s) / 2
+        ctx.beginPath()
+        ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2)
+        ctx.clip()
+        ctx.drawImage(img, sx, sy, s, s, 0, 0, size, size)
+        resolve(canvas.toDataURL('image/webp', 0.6))
+      } catch { resolve(null) }
+    }
+    img.onerror = () => resolve(null)
+    img.src = url
+  })
+}
+
+export function fetchPhoto(
+  cacheKey: string,
+  photoId: string,
+  lat?: number,
+  lng?: number,
+  name?: string,
+  callback?: (entry: PhotoEntry) => void
+) {
+  const cached = cache.get(cacheKey)
+  if (cached) { callback?.(cached); return }
+
+  if (inFlight.has(cacheKey)) {
+    if (callback) onPhotoLoaded(cacheKey, callback)
+    return
+  }
+
+  inFlight.add(cacheKey)
+  mapsApi.placePhoto(photoId, lat, lng, name)
+    .then(async (data: { photoUrl?: string }) => {
+      const photoUrl = data.photoUrl || null
+      if (!photoUrl) {
+        const entry: PhotoEntry = { photoUrl: null, thumbDataUrl: null }
+        cache.set(cacheKey, entry)
+        callback?.(entry)
+        notify(cacheKey, entry)
+        return
+      }
+
+      // Store URL first — sidebar can show immediately
+      const entry: PhotoEntry = { photoUrl, thumbDataUrl: null }
+      cache.set(cacheKey, entry)
+      callback?.(entry)
+      notify(cacheKey, entry)
+
+      // Generate base64 thumb in background
+      const thumb = await urlToBase64(photoUrl)
+      if (thumb) {
+        entry.thumbDataUrl = thumb
+        notifyThumb(cacheKey, thumb)
+      }
+    })
+    .catch(() => {
+      const entry: PhotoEntry = { photoUrl: null, thumbDataUrl: null }
+      cache.set(cacheKey, entry)
+      callback?.(entry)
+      notify(cacheKey, entry)
+    })
+    .finally(() => { inFlight.delete(cacheKey) })
+}
+
+export function getAllThumbs(): Record<string, string> {
+  const r: Record<string, string> = {}
+  for (const [k, v] of cache.entries()) {
+    if (v.thumbDataUrl) r[k] = v.thumbDataUrl
+  }
+  return r
+}

client/src/store/addonStore.ts

@@ -0,0 +1,35 @@
+import { create } from 'zustand'
+import { addonsApi } from '../api/client'
+
+interface Addon {
+  id: string
+  name: string
+  type: string
+  icon: string
+  enabled: boolean
+}
+
+interface AddonState {
+  addons: Addon[]
+  loaded: boolean
+  loadAddons: () => Promise<void>
+  isEnabled: (id: string) => boolean
+}
+
+export const useAddonStore = create<AddonState>((set, get) => ({
+  addons: [],
+  loaded: false,
+
+  loadAddons: async () => {
+    try {
+      const data = await addonsApi.enabled()
+      set({ addons: data.addons || [], loaded: true })
+    } catch {
+      set({ loaded: true })
+    }
+  },
+
+  isEnabled: (id: string) => {
+    return get().addons.some(a => a.id === id && a.enabled)
+  },
+}))

client/src/store/authStore.ts

@@ -9,23 +9,30 @@ interface AuthResponse {
   token: string
 }
 
+export type LoginResult = AuthResponse | { mfa_required: true; mfa_token: string }
+
 interface AvatarResponse {
   avatar_url: string
 }
 
 interface AuthState {
   user: User | null
-  token: string | null
   isAuthenticated: boolean
   isLoading: boolean
   error: string | null
   demoMode: boolean
   hasMapsKey: boolean
+  serverTimezone: string
+  /** Server policy: all users must enable MFA */
+  appRequireMfa: boolean
+  tripRemindersEnabled: boolean
 
-  login: (email: string, password: string) => Promise<AuthResponse>
-  register: (username: string, email: string, password: string) => Promise<AuthResponse>
+  login: (email: string, password: string) => Promise<LoginResult>
+  completeMfaLogin: (mfaToken: string, code: string) => Promise<AuthResponse>
+  register: (username: string, email: string, password: string, invite_token?: string) => Promise<AuthResponse>
   logout: () => void
-  loadUser: () => Promise<void>
+  /** Pass `{ silent: true }` to refresh the user without toggling global isLoading (avoids unmounting protected routes). */
+  loadUser: (opts?: { silent?: boolean }) => Promise<void>
   updateMapsKey: (key: string | null) => Promise<void>
   updateApiKeys: (keys: Record<string, string | null>) => Promise<void>
   updateProfile: (profileData: Partial<User>) => Promise<void>
@@ -33,32 +40,39 @@ interface AuthState {
   deleteAvatar: () => Promise<void>
   setDemoMode: (val: boolean) => void
   setHasMapsKey: (val: boolean) => void
+  setServerTimezone: (tz: string) => void
+  setAppRequireMfa: (val: boolean) => void
+  setTripRemindersEnabled: (val: boolean) => void
   demoLogin: () => Promise<AuthResponse>
 }
 
 export const useAuthStore = create<AuthState>((set, get) => ({
   user: null,
-  token: localStorage.getItem('auth_token') || null,
-  isAuthenticated: !!localStorage.getItem('auth_token'),
-  isLoading: false,
+  isAuthenticated: false,
+  isLoading: true,
   error: null,
   demoMode: localStorage.getItem('demo_mode') === 'true',
   hasMapsKey: false,
+  serverTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  appRequireMfa: false,
+  tripRemindersEnabled: false,
 
   login: async (email: string, password: string) => {
     set({ isLoading: true, error: null })
     try {
-      const data = await authApi.login({ email, password })
-      localStorage.setItem('auth_token', data.token)
+      const data = await authApi.login({ email, password }) as AuthResponse & { mfa_required?: boolean; mfa_token?: string }
+      if (data.mfa_required && data.mfa_token) {
+        set({ isLoading: false, error: null })
+        return { mfa_required: true as const, mfa_token: data.mfa_token }
+      }
       set({
         user: data.user,
-        token: data.token,
         isAuthenticated: true,
         isLoading: false,
         error: null,
       })
-      connect(data.token)
-      return data
+      connect()
+      return data as AuthResponse
     } catch (err: unknown) {
       const error = getApiErrorMessage(err, 'Login failed')
       set({ isLoading: false, error })
@@ -66,19 +80,36 @@ export const useAuthStore = create<AuthState>((set, get) => ({
     }
   },
 
-  register: async (username: string, email: string, password: string) => {
+  completeMfaLogin: async (mfaToken: string, code: string) => {
     set({ isLoading: true, error: null })
     try {
-      const data = await authApi.register({ username, email, password })
-      localStorage.setItem('auth_token', data.token)
+      const data = await authApi.verifyMfaLogin({ mfa_token: mfaToken, code: code.replace(/\s/g, '') })
       set({
         user: data.user,
-        token: data.token,
         isAuthenticated: true,
         isLoading: false,
         error: null,
       })
-      connect(data.token)
+      connect()
+      return data as AuthResponse
+    } catch (err: unknown) {
+      const error = getApiErrorMessage(err, 'Verification failed')
+      set({ isLoading: false, error })
+      throw new Error(error)
+    }
+  },
+
+  register: async (username: string, email: string, password: string, invite_token?: string) => {
+    set({ isLoading: true, error: null })
+    try {
+      const data = await authApi.register({ username, email, password, invite_token })
+      set({
+        user: data.user,
+        isAuthenticated: true,
+        isLoading: false,
+        error: null,
+      })
+      connect()
       return data
     } catch (err: unknown) {
       const error = getApiErrorMessage(err, 'Registration failed')
@@ -89,22 +120,23 @@ export const useAuthStore = create<AuthState>((set, get) => ({
 
   logout: () => {
     disconnect()
-    localStorage.removeItem('auth_token')
+    // Tell server to clear the httpOnly cookie
+    fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
+    // Clear service worker caches containing sensitive data
+    if ('caches' in window) {
+      caches.delete('api-data').catch(() => {})
+      caches.delete('user-uploads').catch(() => {})
+    }
     set({
       user: null,
-      token: null,
       isAuthenticated: false,
       error: null,
     })
   },
 
-  loadUser: async () => {
-    const token = get().token
-    if (!token) {
-      set({ isLoading: false })
-      return
-    }
-    set({ isLoading: true })
+  loadUser: async (opts?: { silent?: boolean }) => {
+    const silent = !!opts?.silent
+    if (!silent) set({ isLoading: true })
     try {
       const data = await authApi.me()
       set({
@@ -112,15 +144,20 @@ export const useAuthStore = create<AuthState>((set, get) => ({
         isAuthenticated: true,
         isLoading: false,
       })
-      connect(token)
+      connect()
     } catch (err: unknown) {
-      localStorage.removeItem('auth_token')
-      set({
-        user: null,
-        token: null,
-        isAuthenticated: false,
-        isLoading: false,
-      })
+      // Only clear auth state on 401 (invalid/expired token), not on network errors
+      const isAuthError = err && typeof err === 'object' && 'response' in err &&
+        (err as { response?: { status?: number } }).response?.status === 401
+      if (isAuthError) {
+        set({
+          user: null,
+          isAuthenticated: false,
+          isLoading: false,
+        })
+      } else {
+        set({ isLoading: false })
+      }
     }
   },
 
@@ -173,21 +210,22 @@ export const useAuthStore = create<AuthState>((set, get) => ({
   },
 
   setHasMapsKey: (val: boolean) => set({ hasMapsKey: val }),
+  setServerTimezone: (tz: string) => set({ serverTimezone: tz }),
+  setAppRequireMfa: (val: boolean) => set({ appRequireMfa: val }),
+  setTripRemindersEnabled: (val: boolean) => set({ tripRemindersEnabled: val }),
 
   demoLogin: async () => {
     set({ isLoading: true, error: null })
     try {
       const data = await authApi.demoLogin()
-      localStorage.setItem('auth_token', data.token)
       set({
         user: data.user,
-        token: data.token,
         isAuthenticated: true,
         isLoading: false,
         demoMode: true,
         error: null,
       })
-      connect(data.token)
+      connect()
       return data
     } catch (err: unknown) {
       const error = getApiErrorMessage(err, 'Demo login failed')

client/src/store/permissionsStore.ts

@@ -0,0 +1,52 @@
+import { create } from 'zustand'
+import { useAuthStore } from './authStore'
+
+export type PermissionLevel = 'admin' | 'trip_owner' | 'trip_member' | 'everybody'
+
+/** Minimal trip shape used by permission checks — accepts both Trip and DashboardTrip */
+type TripOwnerContext = { user_id?: unknown; owner_id?: unknown; is_owner?: unknown }
+
+interface PermissionsState {
+  permissions: Record<string, PermissionLevel>
+  setPermissions: (perms: Record<string, PermissionLevel>) => void
+}
+
+export const usePermissionsStore = create<PermissionsState>((set) => ({
+  permissions: {},
+  setPermissions: (perms) => set({ permissions: perms }),
+}))
+
+/**
+ * Hook that returns a permission checker bound to the current user.
+ * Usage: const can = useCanDo(); can('trip_create') or can('file_upload', trip)
+ */
+export function useCanDo() {
+  const perms = usePermissionsStore((s: PermissionsState) => s.permissions)
+  const user = useAuthStore((s) => s.user)
+
+  return function can(
+    actionKey: string,
+    trip?: TripOwnerContext | null,
+  ): boolean {
+    if (!user) return false
+    if (user.role === 'admin') return true
+
+    const level = perms[actionKey]
+    if (!level) return true // not configured = allow
+
+    // Support both Trip (owner_id) and DashboardTrip/server response (user_id)
+    const tripOwnerId = (trip?.user_id as number | undefined) ?? (trip?.owner_id as number | undefined) ?? null
+    const isOwnerFlag = trip?.is_owner === true || trip?.is_owner === 1
+    const isOwner = isOwnerFlag || (tripOwnerId !== null && tripOwnerId === user.id)
+    const isMember = !isOwner && trip != null
+
+    switch (level) {
+      case 'admin': return false
+      case 'trip_owner': return isOwner
+      case 'trip_member': return isOwner || isMember
+      case 'everybody': return true
+      default: return false
+    }
+  }
+}
+

client/src/store/slices/placesSlice.ts

@@ -37,15 +37,22 @@ export const createPlacesSlice = (set: SetState, get: GetState): PlacesSlice =>
   updatePlace: async (tripId, placeId, placeData) => {
     try {
       const data = await placesApi.update(tripId, placeId, placeData)
-      set(state => ({
-        places: state.places.map(p => p.id === placeId ? data.place : p),
-        assignments: Object.fromEntries(
-          Object.entries(state.assignments).map(([dayId, items]) => [
-            dayId,
-            items.map((a: Assignment) => a.place?.id === placeId ? { ...a, place: { ...data.place, place_time: a.place.place_time, end_time: a.place.end_time } } : a)
-          ])
-        ),
-      }))
+      set(state => {
+        const updatedAssignments = { ...state.assignments }
+        let changed = false
+        for (const [dayId, items] of Object.entries(state.assignments)) {
+          if (items.some((a: Assignment) => a.place?.id === placeId)) {
+            updatedAssignments[dayId] = items.map((a: Assignment) =>
+              a.place?.id === placeId ? { ...a, place: { ...data.place, place_time: a.place.place_time, end_time: a.place.end_time } } : a
+            )
+            changed = true
+          }
+        }
+        return {
+          places: state.places.map(p => p.id === placeId ? data.place : p),
+          ...(changed ? { assignments: updatedAssignments } : {}),
+        }
+      })
       return data.place
     } catch (err: unknown) {
       throw new Error(getApiErrorMessage(err, 'Error updating place'))
@@ -55,15 +62,20 @@ export const createPlacesSlice = (set: SetState, get: GetState): PlacesSlice =>
   deletePlace: async (tripId, placeId) => {
     try {
       await placesApi.delete(tripId, placeId)
-      set(state => ({
-        places: state.places.filter(p => p.id !== placeId),
-        assignments: Object.fromEntries(
-          Object.entries(state.assignments).map(([dayId, items]) => [
-            dayId,
-            items.filter((a: Assignment) => a.place?.id !== placeId)
-          ])
-        ),
-      }))
+      set(state => {
+        const updatedAssignments = { ...state.assignments }
+        let changed = false
+        for (const [dayId, items] of Object.entries(state.assignments)) {
+          if (items.some((a: Assignment) => a.place?.id === placeId)) {
+            updatedAssignments[dayId] = items.filter((a: Assignment) => a.place?.id !== placeId)
+            changed = true
+          }
+        }
+        return {
+          places: state.places.filter(p => p.id !== placeId),
+          ...(changed ? { assignments: updatedAssignments } : {}),
+        }
+      })
     } catch (err: unknown) {
       throw new Error(getApiErrorMessage(err, 'Error deleting place'))
     }

client/src/store/slices/remoteEventHandler.ts

@@ -232,6 +232,11 @@ export function handleRemoteEvent(set: SetState, event: WebSocketEvent): void {
           files: state.files.filter(f => f.id !== payload.fileId),
         }
 
+      // Memories / Photos
+      case 'memories:updated':
+        window.dispatchEvent(new CustomEvent('memories:updated', { detail: payload }))
+        return {}
+
       default:
         return {}
     }

client/src/store/vacayStore.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import apiClient from '../api/client'
 import type { AxiosResponse } from 'axios'
-import type { VacayPlan, VacayUser, VacayEntry, VacayStat, HolidaysMap, HolidayInfo } from '../types'
+import type { VacayPlan, VacayUser, VacayEntry, VacayStat, HolidaysMap, HolidayInfo, VacayHolidayCalendar } from '../types'
 
 const ax = apiClient
 
@@ -65,6 +65,9 @@ interface VacayApi {
   updateStats: (year: number, days: number, targetUserId?: number) => Promise<unknown>
   getCountries: () => Promise<{ countries: string[] }>
   getHolidays: (year: number, country: string) => Promise<VacayHolidayRaw[]>
+  addHolidayCalendar: (data: { region: string; color?: string; label?: string | null }) => Promise<{ calendar: VacayHolidayCalendar }>
+  updateHolidayCalendar: (id: number, data: { region?: string; color?: string; label?: string | null }) => Promise<{ calendar: VacayHolidayCalendar }>
+  deleteHolidayCalendar: (id: number) => Promise<unknown>
 }
 
 const api: VacayApi = {
@@ -87,6 +90,9 @@ const api: VacayApi = {
   updateStats: (year, days, targetUserId) => ax.put(`/addons/vacay/stats/${year}`, { vacation_days: days, target_user_id: targetUserId }).then((r: AxiosResponse) => r.data),
   getCountries: () => ax.get('/addons/vacay/holidays/countries').then((r: AxiosResponse) => r.data),
   getHolidays: (year, country) => ax.get(`/addons/vacay/holidays/${year}/${country}`).then((r: AxiosResponse) => r.data),
+  addHolidayCalendar: (data) => ax.post('/addons/vacay/plan/holiday-calendars', data).then((r: AxiosResponse) => r.data),
+  updateHolidayCalendar: (id, data) => ax.put(`/addons/vacay/plan/holiday-calendars/${id}`, data).then((r: AxiosResponse) => r.data),
+  deleteHolidayCalendar: (id) => ax.delete(`/addons/vacay/plan/holiday-calendars/${id}`).then((r: AxiosResponse) => r.data),
 }
 
 interface VacayState {
@@ -124,6 +130,9 @@ interface VacayState {
   loadStats: (year?: number) => Promise<void>
   updateVacationDays: (year: number, days: number, targetUserId?: number) => Promise<void>
   loadHolidays: (year?: number) => Promise<void>
+  addHolidayCalendar: (data: { region: string; color?: string; label?: string | null }) => Promise<void>
+  updateHolidayCalendar: (id: number, data: { region?: string; color?: string; label?: string | null }) => Promise<void>
+  deleteHolidayCalendar: (id: number) => Promise<void>
   loadAll: () => Promise<void>
 }
 
@@ -247,29 +256,47 @@ export const useVacayStore = create<VacayState>((set, get) => ({
   loadHolidays: async (year?: number) => {
     const y = year || get().selectedYear
     const plan = get().plan
-    if (!plan?.holidays_enabled || !plan?.holidays_region) {
+    const calendars = plan?.holiday_calendars ?? []
+    if (!plan?.holidays_enabled || calendars.length === 0) {
       set({ holidays: {} })
       return
     }
-    const country = plan.holidays_region.split('-')[0]
-    const region = plan.holidays_region.includes('-') ? plan.holidays_region : null
-    try {
-      const data = await api.getHolidays(y, country)
-      const hasRegions = data.some((h: VacayHolidayRaw) => h.counties && h.counties.length > 0)
-      if (hasRegions && !region) {
-        set({ holidays: {} })
-        return
-      }
-      const map: HolidaysMap = {}
-      data.forEach((h: VacayHolidayRaw) => {
-        if (h.global || !h.counties || (region && h.counties.includes(region))) {
-          map[h.date] = { name: h.name, localName: h.localName }
-        }
-      })
-      set({ holidays: map })
-    } catch {
-      set({ holidays: {} })
+    const map: HolidaysMap = {}
+    for (const cal of calendars) {
+      const country = cal.region.split('-')[0]
+      const region = cal.region.includes('-') ? cal.region : null
+      try {
+        const data = await api.getHolidays(y, country)
+        const hasRegions = data.some((h: VacayHolidayRaw) => h.counties && h.counties.length > 0)
+        if (hasRegions && !region) continue
+        data.forEach((h: VacayHolidayRaw) => {
+          if (h.global || !h.counties || (region && h.counties.includes(region))) {
+            if (!map[h.date]) {
+              map[h.date] = { name: h.name, localName: h.localName, color: cal.color, label: cal.label }
+            }
+          }
+        })
+      } catch { /* API error, skip */ }
     }
+    set({ holidays: map })
+  },
+
+  addHolidayCalendar: async (data) => {
+    await api.addHolidayCalendar(data)
+    await get().loadPlan()
+    await get().loadHolidays()
+  },
+
+  updateHolidayCalendar: async (id, data) => {
+    await api.updateHolidayCalendar(id, data)
+    await get().loadPlan()
+    await get().loadHolidays()
+  },
+
+  deleteHolidayCalendar: async (id) => {
+    await api.deleteHolidayCalendar(id)
+    await get().loadPlan()
+    await get().loadHolidays()
   },
 
   loadAll: async () => {

client/src/types.ts

@@ -8,6 +8,10 @@ export interface User {
   avatar_url: string | null
   maps_api_key: string | null
   created_at: string
+  /** Present after load; true when TOTP MFA is enabled for password login */
+  mfa_enabled?: boolean
+  /** True when a password change is required before the user can continue */
+  must_change_password?: boolean
 }
 
 export interface Trip {
@@ -18,6 +22,7 @@ export interface Trip {
   end_date: string
   cover_url: string | null
   is_archived: boolean
+  reminder_days: number
   owner_id: number
   created_at: string
   updated_at: string
@@ -47,6 +52,7 @@ export interface Place {
   image_url: string | null
   google_place_id: string | null
   osm_id: string | null
+  route_geometry: string | null
   place_time: string | null
   end_time: string | null
   created_at: string
@@ -104,6 +110,7 @@ export interface BudgetItem {
   paid_by: number | null
   persons: number
   members: BudgetMember[]
+  expense_date: string | null
 }
 
 export interface BudgetMember {
@@ -116,15 +123,22 @@ export interface Reservation {
   trip_id: number
   name: string
   title?: string
-  type: string | null
+  type: string
   status: 'pending' | 'confirmed'
   date: string | null
   time: string | null
+  reservation_time?: string | null
+  reservation_end_time?: string | null
+  location?: string | null
   confirmation_number: string | null
   notes: string | null
   url: string | null
+  day_id?: number | null
+  place_id?: number | null
+  assignment_id?: number | null
   accommodation_id?: number | null
-  metadata?: Record<string, string> | null
+  day_plan_position?: number | null
+  metadata?: Record<string, string> | string | null
   created_at: string
 }
 
@@ -146,6 +160,7 @@ export interface TripFile {
   deleted_at?: string | null
   created_at: string
   reservation_title?: string
+  linked_reservation_ids?: number[]
   url?: string
 }
 
@@ -161,6 +176,7 @@ export interface Settings {
   time_format: string
   show_place_description: boolean
   route_calculation?: boolean
+  blur_booking_codes?: boolean
 }
 
 export interface AssignmentsMap {
@@ -269,6 +285,9 @@ export interface AppConfig {
   oidc_display_name?: string
   has_maps_key?: boolean
   allowed_file_types?: string
+  timezone?: string
+  /** When true, users without MFA cannot use the app until they enable it */
+  require_mfa?: boolean
 }
 
 // Translation function type
@@ -281,10 +300,23 @@ export interface WebSocketEvent {
 }
 
 // Vacay types
+export interface VacayHolidayCalendar {
+  id: number
+  plan_id: number
+  region: string
+  label: string | null
+  color: string
+  sort_order: number
+}
+
 export interface VacayPlan {
   id: number
   holidays_enabled: boolean
   holidays_region: string | null
+  holiday_calendars: VacayHolidayCalendar[]
+  block_weekends: boolean
+  carry_over_enabled: boolean
+  company_holidays_enabled: boolean
   name?: string
   year?: number
   owner_id?: number
@@ -301,6 +333,9 @@ export interface VacayUser {
 export interface VacayEntry {
   date: string
   user_id: number
+  plan_id?: number
+  person_color?: string
+  person_name?: string
 }
 
 export interface VacayStat {
@@ -312,6 +347,8 @@ export interface VacayStat {
 export interface HolidayInfo {
   name: string
   localName: string
+  color: string
+  label: string | null
 }
 
 export interface HolidaysMap {
@@ -341,7 +378,7 @@ export function getApiErrorMessage(err: unknown, fallback: string): string {
 
 // MergedItem used in day notes hook
 export interface MergedItem {
-  type: 'assignment' | 'note'
+  type: 'assignment' | 'note' | 'place' | 'transport'
   sortKey: number
-  data: Assignment | DayNote
+  data: Assignment | DayNote | Reservation
 }