v2.5.0 — Addon System, Vacay, Atlas, Dashboard Widgets & Mobile Overhaul

The biggest NOMAD update yet. Introduces a modular addon architecture and three major new features.

Addon System:
- Admin panel addon management with enable/disable toggles
- Trip addons (Packing List, Budget, Documents) dynamically show/hide in trip tabs
- Global addons appear in the main navigation for all users

Vacay — Vacation Day Planner (Global Addon):
- Monthly calendar view with international public holidays (100+ countries via Nager.Date API)
- Company holidays with auto-cleanup of conflicting entries
- User-based system: each NOMAD user is a person in the calendar
- Fusion system: invite other users to share a combined calendar with real-time WebSocket sync
- Vacation entitlement tracking with automatic carry-over to next year
- Full settings: block weekends, public holidays, company holidays, carry-over toggle
- Invite/accept/decline flow with forced confirmation modal
- Color management per user with collision detection on fusion
- Dissolve fusion with preserved entries

Atlas — Travel World Map (Global Addon):
- Fullscreen Leaflet world map with colored country polygons (GeoJSON)
- Glass-effect bottom panel with stats, continent breakdown, streak tracking
- Country tooltips with trip count, places visited, first/last visit dates
- Liquid glass hover effect on the stats panel
- Canvas renderer with tile preloading for maximum performance
- Responsive: mobile stats bars, no zoom controls on touch

Dashboard Widgets:
- Currency converter with 50 currencies, CustomSelect dropdowns, localStorage persistence
- Timezone widget with customizable city list, live updating clock
- Per-user toggle via settings button, bottom sheet on mobile

Admin Panel:
- Consistent dark mode across all tabs (CSS variable overrides)
- Online/offline status badges on user list via WebSocket
- Unified heading sizes and subtitles across all sections
- Responsive tab grid on mobile

Mobile Improvements:
- Vacay: slide-in sidebar drawer, floating toolbar, responsive calendar grid
- Atlas: top/bottom glass stat bars, no popups
- Trip Planner: fixed position content container prevents overscroll, portal-based sidebar buttons
- Dashboard: fixed viewport container, mobile widget bottom sheet
- Admin: responsive tab grid, compact buttons
- Global: overscroll-behavior fixes, modal scroll containment

Other:
- Trip tab labels: Planung→Karte, Packliste→Liste, Buchungen→Buchung (DE mobile)
- Reservation form responsive layout
- Backup panel responsive buttons

README.md

@@ -38,7 +38,11 @@ A self-hosted, real-time collaborative travel planner for organizing trips with
 - **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 images and notes
 - **Multi-User** — Invite members to collaborate on shared trips with role-based access
-- **Admin Panel** — User management, create users, global categories, API key configuration, and backups
+- **Addon System** — Modular features that admins can enable/disable: Packing Lists, Budget, Documents, and global addons
+- **Vacay** — Personal vacation day planner with calendar view, public holidays (100+ countries), company holidays, user fusion with WebSocket live sync, and carry-over tracking
+- **Atlas** — Interactive world map showing visited countries with travel stats, continent breakdown, streak tracking, and country details on click
+- **Dashboard Widgets** — Currency converter and timezone clock, toggleable per user
+- **Admin Panel** — User management with online status, global categories, addon management, API key configuration, and backups
 - **Auto-Backups** — Scheduled backups with configurable interval and retention
 - **Route Optimization** — Auto-optimize place order and export to Google Maps
 - **Day Notes** — Add timestamped notes to individual days

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nomad-client",
-  "version": "2.0.0",
+  "version": "2.5.0",
   "private": true,
   "type": "module",
   "scripts": {

client/src/App.jsx

@@ -10,6 +10,8 @@ import TripPlannerPage from './pages/TripPlannerPage'
 import FilesPage from './pages/FilesPage'
 import AdminPage from './pages/AdminPage'
 import SettingsPage from './pages/SettingsPage'
+import VacayPage from './pages/VacayPage'
+import AtlasPage from './pages/AtlasPage'
 import { ToastContainer } from './components/shared/Toast'
 import { TranslationProvider } from './i18n'
 import DemoBanner from './components/Layout/DemoBanner'
@@ -33,7 +35,7 @@ function ProtectedRoute({ children, adminRequired = false }) {
     return <Navigate to="/login" replace />
   }
 
-  if (adminRequired && user?.role !== 'admin') {
+  if (adminRequired && user && user.role !== 'admin') {
     return <Navigate to="/dashboard" replace />
   }
 
@@ -132,6 +134,22 @@ export default function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/vacay"
+          element={
+            <ProtectedRoute>
+              <VacayPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/atlas"
+          element={
+            <ProtectedRoute>
+              <AtlasPage />
+            </ProtectedRoute>
+          }
+        />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </TranslationProvider>

client/src/api/client.js

@@ -127,6 +127,12 @@ export const adminApi = {
   saveDemoBaseline: () => apiClient.post('/admin/save-demo-baseline').then(r => r.data),
   getOidc: () => apiClient.get('/admin/oidc').then(r => r.data),
   updateOidc: (data) => apiClient.put('/admin/oidc', data).then(r => r.data),
+  addons: () => apiClient.get('/admin/addons').then(r => r.data),
+  updateAddon: (id, data) => apiClient.put(`/admin/addons/${id}`, data).then(r => r.data),
+}
+
+export const addonsApi = {
+  enabled: () => apiClient.get('/addons').then(r => r.data),
 }
 
 export const mapsApi = {

client/src/components/Admin/AddonManager.jsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react'
+import { adminApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase } from 'lucide-react'
+
+const ICON_MAP = {
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase,
+}
+
+function AddonIcon({ name, size = 20 }) {
+  const Icon = ICON_MAP[name] || Puzzle
+  return <Icon size={size} />
+}
+
+export default function AddonManager() {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const [addons, setAddons] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadAddons()
+  }, [])
+
+  const loadAddons = async () => {
+    setLoading(true)
+    try {
+      const data = await adminApi.addons()
+      setAddons(data.addons)
+    } catch (err) {
+      toast.error(t('admin.addons.toast.error'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleToggle = async (addon) => {
+    const newEnabled = !addon.enabled
+    // Optimistic update
+    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'))
+      toast.success(t('admin.addons.toast.updated'))
+    } catch (err) {
+      // Rollback
+      setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: !newEnabled } : a))
+      toast.error(t('admin.addons.toast.error'))
+    }
+  }
+
+  const tripAddons = addons.filter(a => a.type === 'trip')
+  const globalAddons = addons.filter(a => a.type === 'global')
+
+  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" style={{ borderTopColor: 'var(--text-primary)' }}></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+        <div className="px-6 py-4 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
+          <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.addons.title')}</h2>
+          <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('admin.addons.subtitle')}</p>
+        </div>
+
+        {addons.length === 0 ? (
+          <div className="p-8 text-center text-sm" style={{ color: 'var(--text-faint)' }}>
+            {t('admin.addons.noAddons')}
+          </div>
+        ) : (
+          <div>
+            {/* Trip Addons */}
+            {tripAddons.length > 0 && (
+              <div>
+                <div className="px-6 py-2.5 border-b flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
+                  <Briefcase 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.trip')} — {t('admin.addons.tripHint')}
+                  </span>
+                </div>
+                {tripAddons.map(addon => (
+                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                ))}
+              </div>
+            )}
+
+            {/* Global Addons */}
+            {globalAddons.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)' }}>
+                  <Globe 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.global')} — {t('admin.addons.globalHint')}
+                  </span>
+                </div>
+                {globalAddons.map(addon => (
+                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function AddonRow({ addon, onToggle, t }) {
+  return (
+    <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)' }}>
+      {/* Icon */}
+      <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}>
+        <AddonIcon name={addon.icon} size={20} />
+      </div>
+
+      {/* 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-[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>
+        </div>
+        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{addon.description}</p>
+      </div>
+
+      {/* Toggle */}
+      <div className="flex items-center gap-2 shrink-0">
+        <span className="text-xs font-medium" style={{ color: addon.enabled ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+          {addon.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+        </span>
+        <button
+          onClick={() => onToggle(addon)}
+          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+          style={{ background: addon.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
+        >
+          <span
+            className="inline-block h-4 w-4 transform rounded-full transition-transform"
+            style={{
+              background: addon.enabled ? 'var(--bg-card)' : 'var(--bg-card)',
+              transform: addon.enabled ? 'translateX(22px)' : 'translateX(4px)',
+            }}
+          />
+        </button>
+      </div>
+    </div>
+  )
+}

client/src/components/Admin/BackupPanel.jsx

@@ -153,8 +153,8 @@ export default function BackupPanel() {
           <div className="flex items-center gap-3">
             <HardDrive className="w-5 h-5 text-gray-400" />
             <div>
-              <h2 className="text-lg font-semibold text-gray-900">{t('backup.title')}</h2>
-              <p className="text-sm text-gray-500 mt-0.5">{t('backup.subtitle')}</p>
+              <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('backup.title')}</h2>
+              <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('backup.subtitle')}</p>
             </div>
           </div>
           <div className="flex items-center gap-2">
@@ -179,26 +179,28 @@ export default function BackupPanel() {
               onClick={() => fileInputRef.current?.click()}
               disabled={isUploading}
               className="flex items-center gap-2 border border-gray-200 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 text-sm font-medium disabled:opacity-60"
+              title={isUploading ? t('backup.uploading') : t('backup.upload')}
             >
               {isUploading ? (
                 <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" />
               ) : (
                 <Upload className="w-4 h-4" />
               )}
-              {isUploading ? t('backup.uploading') : t('backup.upload')}
+              <span className="hidden sm:inline">{isUploading ? t('backup.uploading') : t('backup.upload')}</span>
             </button>
 
             <button
               onClick={handleCreate}
               disabled={isCreating}
-              className="flex items-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-4 py-2 rounded-lg hover:bg-slate-900 text-sm font-medium disabled:opacity-60"
+              className="flex items-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-900 text-sm font-medium disabled:opacity-60"
+              title={isCreating ? t('backup.creating') : t('backup.create')}
             >
               {isCreating ? (
                 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
               ) : (
                 <Plus className="w-4 h-4" />
               )}
-              {isCreating ? t('backup.creating') : t('backup.create')}
+              <span className="hidden sm:inline">{isCreating ? t('backup.creating') : t('backup.create')}</span>
             </button>
           </div>
         </div>
@@ -275,23 +277,23 @@ export default function BackupPanel() {
         <div className="flex items-center gap-3 mb-6">
           <Clock className="w-5 h-5 text-gray-400" />
           <div>
-            <h2 className="text-lg font-semibold text-gray-900">{t('backup.auto.title')}</h2>
-            <p className="text-sm text-gray-500 mt-0.5">{t('backup.auto.subtitle')}</p>
+            <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('backup.auto.title')}</h2>
+            <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('backup.auto.subtitle')}</p>
           </div>
         </div>
 
         <div className="flex flex-col gap-5">
           {/* Enable toggle */}
-          <label className="flex items-center justify-between cursor-pointer">
-            <div>
+          <label className="flex items-center justify-between gap-4 cursor-pointer">
+            <div className="min-w-0">
               <span className="text-sm font-medium text-gray-900">{t('backup.auto.enable')}</span>
               <p className="text-xs text-gray-500 mt-0.5">{t('backup.auto.enableHint')}</p>
             </div>
             <button
               onClick={() => handleAutoSettingsChange('enabled', !autoSettings.enabled)}
-              className={`relative 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 ${autoSettings.enabled ? 'bg-slate-900 dark:bg-slate-100' : 'bg-gray-200 dark:bg-gray-600'}`}
             >
-              <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${autoSettings.enabled ? 'translate-x-6' : 'translate-x-1'}`} />
+              <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'}`} />
             </button>
           </label>
 

client/src/components/Admin/CategoryManager.jsx

@@ -190,13 +190,14 @@ export default function CategoryManager() {
     <div className="bg-white rounded-2xl border border-gray-200 p-6">
       <div className="flex items-center justify-between mb-6">
         <div>
-          <h2 className="text-lg font-semibold text-gray-900">{t('categories.title')}</h2>
-          <p className="text-sm text-gray-500 mt-0.5">{t('categories.subtitle')}</p>
+          <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('categories.title')}</h2>
+          <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('categories.subtitle')}</p>
         </div>
         <button onClick={handleStartCreate}
-          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">
+          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" />
-          {t('categories.new')}
+          <span className="hidden sm:inline">{t('categories.new')}</span>
+          <span className="sm:hidden">Add</span>
         </button>
       </div>
 

client/src/components/Dashboard/CurrencyWidget.jsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { ArrowRightLeft, RefreshCw } from 'lucide-react'
+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',
+]
+
+const CURRENCY_OPTIONS = CURRENCIES.map(c => ({ value: c, label: c }))
+
+export default function CurrencyWidget() {
+  const { t } = useTranslation()
+  const [from, setFrom] = useState(() => localStorage.getItem('currency_from') || 'EUR')
+  const [to, setTo] = useState(() => localStorage.getItem('currency_to') || 'USD')
+  const [amount, setAmount] = useState('100')
+  const [rate, setRate] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const fetchRate = useCallback(async () => {
+    if (from === to) { setRate(1); return }
+    setLoading(true)
+    try {
+      const resp = await fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)
+      const data = await resp.json()
+      setRate(data.rates?.[to] || null)
+    } catch { setRate(null) }
+    finally { setLoading(false) }
+  }, [from, to])
+
+  useEffect(() => { fetchRate() }, [fetchRate])
+  useEffect(() => { localStorage.setItem('currency_from', from) }, [from])
+  useEffect(() => { localStorage.setItem('currency_to', to) }, [to])
+
+  const swap = () => { setFrom(to); setTo(from) }
+  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 })
+  }
+  const result = rawResult
+
+  return (
+    <div className="rounded-2xl border p-4" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-xs font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{t('dashboard.currency')}</span>
+        <button onClick={fetchRate} className="p-1 rounded-md transition-colors" style={{ color: 'var(--text-faint)' }}>
+          <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+
+      {/* Amount */}
+      <div className="rounded-xl px-4 py-3 mb-3" style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
+        <input
+          type="number"
+          value={amount}
+          onChange={e => setAmount(e.target.value)}
+          className="w-full text-2xl font-black tabular-nums outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+          style={{ color: 'var(--text-primary)', background: 'transparent', border: 'none' }}
+        />
+      </div>
+
+      {/* From / Swap / To */}
+      <div className="flex items-center gap-2 mb-3">
+        <div className="flex-1" style={{ '--bg-input': 'transparent', '--border-primary': 'transparent' }}>
+          <CustomSelect value={from} onChange={setFrom} options={CURRENCY_OPTIONS} searchable size="sm" />
+        </div>
+        <button onClick={swap} className="p-1.5 rounded-lg shrink-0 transition-colors" style={{ color: 'var(--text-muted)' }}>
+          <ArrowRightLeft size={13} />
+        </button>
+        <div className="flex-1" style={{ '--bg-input': 'transparent', '--border-primary': 'transparent' }}>
+          <CustomSelect value={to} onChange={setTo} options={CURRENCY_OPTIONS} searchable size="sm" />
+        </div>
+      </div>
+
+      {/* Result */}
+      <div className="rounded-xl p-3" style={{ background: 'var(--bg-secondary)' }}>
+        <p className="text-xl font-black tabular-nums" style={{ color: 'var(--text-primary)' }}>
+          {formatNumber(result)} <span className="text-sm font-semibold" style={{ color: 'var(--text-muted)' }}>{to}</span>
+        </p>
+        {rate && <p className="text-[10px] mt-0.5" style={{ color: 'var(--text-faint)' }}>1 {from} = {rate.toFixed(4)} {to}</p>}
+      </div>
+    </div>
+  )
+}

client/src/components/Dashboard/TimezoneWidget.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react'
+import { Clock, Plus, X } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+const POPULAR_ZONES = [
+  { label: 'New York', tz: 'America/New_York' },
+  { label: 'London', tz: 'Europe/London' },
+  { label: 'Berlin', tz: 'Europe/Berlin' },
+  { label: 'Paris', tz: 'Europe/Paris' },
+  { label: 'Dubai', tz: 'Asia/Dubai' },
+  { label: 'Mumbai', tz: 'Asia/Kolkata' },
+  { label: 'Bangkok', tz: 'Asia/Bangkok' },
+  { label: 'Tokyo', tz: 'Asia/Tokyo' },
+  { label: 'Sydney', tz: 'Australia/Sydney' },
+  { label: 'Los Angeles', tz: 'America/Los_Angeles' },
+  { label: 'Chicago', tz: 'America/Chicago' },
+  { label: 'São Paulo', tz: 'America/Sao_Paulo' },
+  { label: 'Istanbul', tz: 'Europe/Istanbul' },
+  { label: 'Singapore', tz: 'Asia/Singapore' },
+  { label: 'Hong Kong', tz: 'Asia/Hong_Kong' },
+  { label: 'Seoul', tz: 'Asia/Seoul' },
+  { label: 'Moscow', tz: 'Europe/Moscow' },
+  { label: 'Cairo', tz: 'Africa/Cairo' },
+]
+
+function getTime(tz) {
+  try {
+    return new Date().toLocaleTimeString('de-DE', { timeZone: tz, hour: '2-digit', minute: '2-digit' })
+  } catch { return '—' }
+}
+
+function getOffset(tz) {
+  try {
+    const now = new Date()
+    const local = new Date(now.toLocaleString('en-US', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }))
+    const remote = new Date(now.toLocaleString('en-US', { timeZone: tz }))
+    const diff = (remote - local) / 3600000
+    const sign = diff >= 0 ? '+' : ''
+    return `${sign}${diff}h`
+  } catch { return '' }
+}
+
+export default function TimezoneWidget() {
+  const { t } = useTranslation()
+  const [zones, setZones] = useState(() => {
+    const saved = localStorage.getItem('dashboard_timezones')
+    return saved ? JSON.parse(saved) : [
+      { label: 'New York', tz: 'America/New_York' },
+      { label: 'Tokyo', tz: 'Asia/Tokyo' },
+    ]
+  })
+  const [now, setNow] = useState(Date.now())
+  const [showAdd, setShowAdd] = useState(false)
+
+  useEffect(() => {
+    const i = setInterval(() => setNow(Date.now()), 10000)
+    return () => clearInterval(i)
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem('dashboard_timezones', JSON.stringify(zones))
+  }, [zones])
+
+  const addZone = (zone) => {
+    if (!zones.find(z => z.tz === zone.tz)) {
+      setZones([...zones, zone])
+    }
+    setShowAdd(false)
+  }
+
+  const removeZone = (tz) => setZones(zones.filter(z => z.tz !== tz))
+
+  const localTime = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+  const rawZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const localZone = rawZone.split('/').pop().replace(/_/g, ' ')
+  // Show abbreviated timezone name (e.g. CET, CEST, EST)
+  const tzAbbr = new Date().toLocaleTimeString('en-US', { timeZoneName: 'short' }).split(' ').pop()
+
+  return (
+    <div className="rounded-2xl border p-4" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-xs font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{t('dashboard.timezone')}</span>
+        <button onClick={() => setShowAdd(!showAdd)} className="p-1 rounded-md transition-colors" style={{ color: 'var(--text-faint)' }}>
+          <Plus size={12} />
+        </button>
+      </div>
+
+      {/* Local time */}
+      <div className="mb-3 pb-3" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+        <p className="text-2xl font-black tabular-nums" style={{ color: 'var(--text-primary)' }}>{localTime}</p>
+        <p className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{localZone} ({tzAbbr}) · {t('dashboard.localTime')}</p>
+      </div>
+
+      {/* Zone list */}
+      <div className="space-y-2">
+        {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-[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)' }}>
+              <X size={11} />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Add zone dropdown */}
+      {showAdd && (
+        <div className="mt-2 rounded-xl p-2 max-h-[200px] overflow-auto" style={{ background: 'var(--bg-secondary)' }}>
+          {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"
+              style={{ color: 'var(--text-primary)' }}
+              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>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Layout/Navbar.jsx

@@ -1,19 +1,39 @@
 import React, { useState, useEffect } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun } from 'lucide-react'
+import { addonsApi } from '../../api/client'
+import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, CalendarDays, Briefcase, Globe } from 'lucide-react'
+
+const ADDON_ICONS = { CalendarDays, Briefcase, Globe }
 
 export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }) {
   const { user, logout } = useAuthStore()
   const { settings, updateSetting } = useSettingsStore()
   const { t, locale } = useTranslation()
   const navigate = useNavigate()
+  const location = useLocation()
   const [userMenuOpen, setUserMenuOpen] = useState(false)
   const [appVersion, setAppVersion] = useState(null)
+  const [globalAddons, setGlobalAddons] = useState([])
   const dark = settings.dark_mode
 
+  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
+  useEffect(() => {
+    const handler = () => loadAddons()
+    window.addEventListener('addons-changed', handler)
+    return () => window.removeEventListener('addons-changed', handler)
+  }, [user])
+
   useEffect(() => {
     import('../../api/client').then(({ authApi }) => {
       authApi.getAppConfig?.().then(c => setAppVersion(c?.version)).catch(() => {})
@@ -35,6 +55,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare })
       backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
       borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)'}`,
       boxShadow: dark ? '0 1px 12px rgba(0,0,0,0.2)' : '0 1px 12px rgba(0,0,0,0.05)',
+      touchAction: 'manipulation',
     }} className="h-14 flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
       {/* Left side */}
       <div className="flex items-center gap-3 min-w-0">
@@ -55,6 +76,42 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare })
           <span className="font-bold text-sm hidden sm:inline">NOMAD</span>
         </Link>
 
+        {/* Global addon nav items */}
+        {globalAddons.length > 0 && !tripTitle && (
+          <>
+            <span style={{ color: 'var(--text-faint)' }}>|</span>
+            <Link to="/dashboard"
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
+              style={{
+                color: location.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-muted)',
+                background: location.pathname === '/dashboard' ? 'var(--bg-hover)' : 'transparent',
+              }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+              onMouseLeave={e => { if (location.pathname !== '/dashboard') e.currentTarget.style.background = 'transparent' }}>
+              <Briefcase className="w-3.5 h-3.5" />
+              <span className="hidden md:inline">{t('nav.myTrips')}</span>
+            </Link>
+            {globalAddons.map(addon => {
+              const Icon = ADDON_ICONS[addon.icon] || CalendarDays
+              const path = `/${addon.id}`
+              const isActive = location.pathname === path
+              return (
+                <Link key={addon.id} to={path}
+                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
+                  style={{
+                    color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
+                    background: isActive ? 'var(--bg-hover)' : 'transparent',
+                  }}
+                  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>
+                </Link>
+              )
+            })}
+          </>
+        )}
+
         {tripTitle && (
           <>
             <span className="hidden sm:inline" style={{ color: 'var(--text-faint)' }}>/</span>

client/src/components/Planner/PlaceFormModal.jsx

@@ -300,9 +300,9 @@ export default function PlaceFormModal({
 
         {/* Reservation */}
         <div className="border border-gray-200 rounded-xl p-3 space-y-3">
-          <div className="flex items-center gap-3">
-            <label className="block text-sm font-medium text-gray-700">{t('places.formReservation')}</label>
-            <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
+            <label className="block text-sm font-medium text-gray-700 shrink-0">{t('places.formReservation')}</label>
+            <div className="flex gap-2 flex-wrap">
               {['none', 'pending', 'confirmed'].map(status => (
                 <button
                   key={status}

client/src/components/Vacay/VacayCalendar.jsx

@@ -0,0 +1,96 @@
+import React, { useMemo, useState, useCallback } from 'react'
+import { useVacayStore } from '../../store/vacayStore'
+import { useTranslation } from '../../i18n'
+import { isWeekend } from './holidays'
+import VacayMonthCard from './VacayMonthCard'
+import { Building2, MousePointer2 } from 'lucide-react'
+
+export default function VacayCalendar() {
+  const { t } = useTranslation()
+  const { selectedYear, selectedUserId, entries, companyHolidays, toggleEntry, toggleCompanyHoliday, plan, users, holidays } = useVacayStore()
+  const [companyMode, setCompanyMode] = useState(false)
+
+  const companyHolidaySet = useMemo(() => {
+    const s = new Set()
+    companyHolidays.forEach(h => s.add(h.date))
+    return s
+  }, [companyHolidays])
+
+  const entryMap = useMemo(() => {
+    const map = {}
+    entries.forEach(e => {
+      if (!map[e.date]) map[e.date] = []
+      map[e.date].push(e)
+    })
+    return map
+  }, [entries])
+
+  const blockWeekends = plan?.block_weekends !== false
+  const companyHolidaysEnabled = plan?.company_holidays_enabled !== false
+
+  const handleCellClick = useCallback(async (dateStr) => {
+    if (companyMode) {
+      if (!companyHolidaysEnabled) return
+      await toggleCompanyHoliday(dateStr)
+      return
+    }
+    if (holidays[dateStr]) return
+    if (blockWeekends && isWeekend(dateStr)) return
+    if (companyHolidaysEnabled && companyHolidaySet.has(dateStr)) return
+    await toggleEntry(dateStr, selectedUserId || undefined)
+  }, [companyMode, toggleEntry, toggleCompanyHoliday, holidays, companyHolidaySet, blockWeekends, companyHolidaysEnabled, selectedUserId])
+
+  const selectedUser = users.find(u => u.id === selectedUserId)
+
+  return (
+    <div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+        {Array.from({ length: 12 }, (_, i) => (
+          <VacayMonthCard
+            key={i}
+            year={selectedYear}
+            month={i}
+            holidays={holidays}
+            companyHolidaySet={companyHolidaySet}
+            companyHolidaysEnabled={companyHolidaysEnabled}
+            entryMap={entryMap}
+            onCellClick={handleCellClick}
+            companyMode={companyMode}
+            blockWeekends={blockWeekends}
+          />
+        ))}
+      </div>
+
+      {/* Floating toolbar */}
+      <div className="sticky bottom-3 sm:bottom-4 mt-3 sm:mt-4 flex items-center justify-center z-30 px-2">
+        <div className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-xl border" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', boxShadow: '0 8px 32px rgba(0,0,0,0.12)' }}>
+          <button
+            onClick={() => setCompanyMode(false)}
+            className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-all"
+            style={{
+              background: !companyMode ? 'var(--text-primary)' : 'transparent',
+              color: !companyMode ? 'var(--bg-card)' : 'var(--text-muted)',
+              border: companyMode ? '1px solid var(--border-primary)' : '1px solid transparent',
+            }}>
+            <MousePointer2 size={13} />
+            {selectedUser && <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: selectedUser.color }} />}
+            {selectedUser ? selectedUser.username : t('vacay.modeVacation')}
+          </button>
+          {companyHolidaysEnabled && (
+            <button
+              onClick={() => setCompanyMode(true)}
+              className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-all"
+              style={{
+                background: companyMode ? '#d97706' : 'transparent',
+                color: companyMode ? '#fff' : 'var(--text-muted)',
+                border: !companyMode ? '1px solid var(--border-primary)' : '1px solid transparent',
+              }}>
+              <Building2 size={13} />
+              {t('vacay.modeCompany')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/Vacay/VacayMonthCard.jsx

@@ -0,0 +1,118 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from '../../i18n'
+import { isWeekend } from './holidays'
+
+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']
+
+export default function VacayMonthCard({
+  year, month, holidays, companyHolidaySet, companyHolidaysEnabled = true, entryMap,
+  onCellClick, companyMode, blockWeekends
+}) {
+  const { language } = useTranslation()
+  const weekdays = language === 'de' ? WEEKDAYS_DE : WEEKDAYS_EN
+  const monthNames = language === 'de' ? MONTHS_DE : MONTHS_EN
+
+  const weeks = useMemo(() => {
+    const firstDay = new Date(year, month, 1)
+    const daysInMonth = new Date(year, month + 1, 0).getDate()
+    let startDow = firstDay.getDay() - 1
+    if (startDow < 0) startDow = 6
+    const cells = []
+    for (let i = 0; i < startDow; i++) cells.push(null)
+    for (let d = 1; d <= daysInMonth; d++) cells.push(d)
+    while (cells.length % 7 !== 0) cells.push(null)
+    const w = []
+    for (let i = 0; i < cells.length; i += 7) w.push(cells.slice(i, i + 7))
+    return w
+  }, [year, month])
+
+  const pad = (n) => String(n).padStart(2, '0')
+
+  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>
+      </div>
+
+      <div className="grid grid-cols-7 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
+        {weekdays.map((wd, i) => (
+          <div key={wd} className="text-center text-[10px] font-medium py-1" style={{ color: i >= 5 ? 'var(--text-faint)' : 'var(--text-muted)' }}>
+            {wd}
+          </div>
+        ))}
+      </div>
+
+      <div>
+        {weeks.map((week, wi) => (
+          <div key={wi} className="grid grid-cols-7">
+            {week.map((day, di) => {
+              if (day === null) return <div key={di} style={{ height: 28 }} />
+
+              const dateStr = `${year}-${pad(month + 1)}-${pad(day)}`
+              const weekend = di >= 5
+              const holiday = holidays[dateStr]
+              const isCompany = companyHolidaysEnabled && companyHolidaySet.has(dateStr)
+              const dayEntries = entryMap[dateStr] || []
+              const isBlocked = !!holiday || (weekend && blockWeekends) || (isCompany && !companyMode)
+
+              return (
+                <div
+                  key={di}
+                  className="relative flex items-center justify-center cursor-pointer transition-colors"
+                  style={{
+                    height: 28,
+                    background: weekend ? 'var(--bg-secondary)' : 'transparent',
+                    borderTop: '1px solid var(--border-secondary)',
+                    borderRight: '1px solid var(--border-secondary)',
+                    cursor: isBlocked ? 'default' : 'pointer',
+                  }}
+                  onClick={() => onCellClick(dateStr)}
+                  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)' }} />}
+                  {isCompany && <div className="absolute inset-0.5 rounded" style={{ background: 'rgba(245,158,11,0.15)' }} />}
+
+                  {dayEntries.length === 1 && (
+                    <div className="absolute inset-0.5 rounded" style={{ backgroundColor: dayEntries[0].person_color, opacity: 0.4 }} />
+                  )}
+                  {dayEntries.length === 2 && (
+                    <div className="absolute inset-0.5 rounded" style={{
+                      background: `linear-gradient(135deg, ${dayEntries[0].person_color} 50%, ${dayEntries[1].person_color} 50%)`,
+                      opacity: 0.4,
+                    }} />
+                  )}
+                  {dayEntries.length === 3 && (
+                    <div className="absolute inset-0.5 rounded overflow-hidden" style={{ opacity: 0.4 }}>
+                      <div className="absolute top-0 left-0 w-1/2 h-full" style={{ backgroundColor: dayEntries[0].person_color }} />
+                      <div className="absolute top-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[1].person_color }} />
+                      <div className="absolute bottom-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[2].person_color }} />
+                    </div>
+                  )}
+                  {dayEntries.length >= 4 && (
+                    <div className="absolute inset-0.5 rounded overflow-hidden" style={{ opacity: 0.4 }}>
+                      <div className="absolute top-0 left-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[0].person_color }} />
+                      <div className="absolute top-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[1].person_color }} />
+                      <div className="absolute bottom-0 left-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[2].person_color }} />
+                      <div className="absolute bottom-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[3].person_color }} />
+                    </div>
+                  )}
+
+                  <span className="relative z-[1] text-[11px] font-medium" style={{
+                    color: holiday ? '#dc2626' : weekend ? 'var(--text-faint)' : 'var(--text-primary)',
+                    fontWeight: dayEntries.length > 0 ? 700 : 500,
+                  }}>
+                    {day}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

client/src/components/Vacay/VacayPersons.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { UserPlus, Unlink, Check, Loader2, Clock, X } from 'lucide-react'
+import { useVacayStore } from '../../store/vacayStore'
+import { useAuthStore } from '../../store/authStore'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import CustomSelect from '../shared/CustomSelect'
+import apiClient from '../../api/client'
+
+const PRESET_COLORS = [
+  '#6366f1', '#ec4899', '#14b8a6', '#8b5cf6', '#ef4444',
+  '#3b82f6', '#22c55e', '#06b6d4', '#f43f5e', '#a855f7',
+  '#10b981', '#0ea5e9', '#64748b', '#be185d', '#0d9488',
+]
+
+export default function VacayPersons() {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const { users, pendingInvites, invite, cancelInvite, updateColor, selectedUserId, setSelectedUserId, isFused } = useVacayStore()
+  const { user: currentUser } = useAuthStore()
+
+  // Default selectedUserId to current user
+  useEffect(() => {
+    if (!selectedUserId && currentUser) setSelectedUserId(currentUser.id)
+  }, [currentUser, selectedUserId])
+  const [showInvite, setShowInvite] = useState(false)
+  const [showColorPicker, setShowColorPicker] = useState(false)
+  const [colorEditUserId, setColorEditUserId] = useState(null)
+  const [availableUsers, setAvailableUsers] = useState([])
+  const [selectedInviteUser, setSelectedInviteUser] = useState(null)
+  const [inviting, setInviting] = useState(false)
+
+  const loadAvailable = async () => {
+    try {
+      const data = await apiClient.get('/addons/vacay/available-users').then(r => r.data)
+      setAvailableUsers(data.users)
+    } catch { /* */ }
+  }
+
+  const handleInvite = async () => {
+    if (!selectedInviteUser) return
+    setInviting(true)
+    try {
+      await invite(selectedInviteUser)
+      toast.success(t('vacay.inviteSent'))
+      setShowInvite(false)
+      setSelectedInviteUser(null)
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('vacay.inviteError'))
+    } finally {
+      setInviting(false)
+    }
+  }
+
+  const handleColorChange = async (color) => {
+    await updateColor(color, colorEditUserId)
+    setShowColorPicker(false)
+    setColorEditUserId(null)
+  }
+
+  const editingUserColor = users.find(u => u.id === colorEditUserId)?.color || '#6366f1'
+
+  return (
+    <div className="rounded-xl border p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--text-faint)' }}>{t('vacay.persons')}</span>
+        <button onClick={() => { setShowInvite(true); loadAvailable() }}
+          className="p-0.5 rounded transition-colors" style={{ color: 'var(--text-faint)' }}>
+          <UserPlus size={14} />
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-0.5">
+        {users.map(u => {
+          const isSelected = selectedUserId === u.id
+          return (
+            <div key={u.id}
+              onClick={() => { if (isFused) setSelectedUserId(u.id) }}
+              className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg group transition-all"
+              style={{
+                background: isSelected ? 'var(--bg-hover)' : 'transparent',
+                border: isSelected ? '1px solid var(--border-primary)' : '1px solid transparent',
+                cursor: isFused ? 'pointer' : 'default',
+              }}>
+              <button
+                onClick={(e) => { e.stopPropagation(); setColorEditUserId(u.id); setShowColorPicker(true) }}
+                className="w-3.5 h-3.5 rounded-full shrink-0 transition-transform hover:scale-125"
+                style={{ backgroundColor: u.color, cursor: 'pointer' }}
+                title={t('vacay.changeColor')}
+              />
+              <span className="text-xs font-medium flex-1 truncate" style={{ color: 'var(--text-primary)' }}>
+                {u.username}
+                {u.id === currentUser?.id && <span style={{ color: 'var(--text-faint)' }}> ({t('vacay.you')})</span>}
+              </span>
+              {isSelected && isFused && (
+                <Check size={12} style={{ color: 'var(--text-primary)' }} />
+              )}
+            </div>
+          )
+        })}
+
+        {/* Pending invites */}
+        {pendingInvites.map(inv => (
+          <div key={inv.id} className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg group"
+            style={{ background: 'var(--bg-secondary)', opacity: 0.7 }}>
+            <Clock size={12} style={{ color: 'var(--text-faint)' }} />
+            <span className="text-xs flex-1 truncate" style={{ color: 'var(--text-muted)' }}>
+              {inv.username} <span className="text-[10px]">({t('vacay.pending')})</span>
+            </span>
+            <button onClick={() => cancelInvite(inv.user_id)}
+              className="opacity-0 group-hover:opacity-100 text-[10px] px-1.5 py-0.5 rounded transition-all"
+              style={{ color: 'var(--text-faint)' }}>
+              {t('common.cancel')}
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Invite Modal — Portal to body to avoid z-index issues */}
+      {showInvite && ReactDOM.createPortal(
+        <div className="fixed inset-0 flex items-center justify-center px-4" style={{ zIndex: 99990, backgroundColor: 'rgba(15,23,42,0.5)', paddingTop: 70 }}
+          onClick={() => setShowInvite(false)}>
+          <div className="rounded-2xl shadow-2xl w-full max-w-sm" style={{ background: 'var(--bg-card)', animation: 'modalIn 0.2s ease-out' }}
+            onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between p-5" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+              <h2 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('vacay.inviteUser')}</h2>
+              <button onClick={() => setShowInvite(false)} className="p-1.5 rounded-lg transition-colors" style={{ color: 'var(--text-faint)' }}>
+                <X size={16} />
+              </button>
+            </div>
+            <div className="p-5 space-y-4">
+              <p className="text-xs" style={{ color: 'var(--text-muted)' }}>{t('vacay.inviteHint')}</p>
+              {availableUsers.length === 0 ? (
+                <p className="text-xs text-center py-4" style={{ color: 'var(--text-faint)' }}>{t('vacay.noUsersAvailable')}</p>
+              ) : (
+                <CustomSelect
+                  value={selectedInviteUser}
+                  onChange={setSelectedInviteUser}
+                  options={availableUsers.map(u => ({ value: u.id, label: `${u.username} (${u.email})` }))}
+                  placeholder={t('vacay.selectUser')}
+                  searchable
+                />
+              )}
+              <div className="flex gap-3 justify-end pt-2">
+                <button onClick={() => setShowInvite(false)} className="px-4 py-2 text-sm rounded-lg"
+                  style={{ color: 'var(--text-muted)', border: '1px solid var(--border-primary)' }}>
+                  {t('common.cancel')}
+                </button>
+                <button onClick={handleInvite} disabled={!selectedInviteUser || inviting}
+                  className="px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-1.5 disabled:opacity-40"
+                  style={{ background: 'var(--text-primary)', color: 'var(--bg-card)' }}>
+                  {inviting && <Loader2 size={13} className="animate-spin" />}
+                  {t('vacay.sendInvite')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Color Picker Modal — Portal to body */}
+      {showColorPicker && ReactDOM.createPortal(
+        <div className="fixed inset-0 flex items-center justify-center px-4" style={{ zIndex: 99990, backgroundColor: 'rgba(15,23,42,0.5)', paddingTop: 70 }}
+          onClick={() => { setShowColorPicker(false); setColorEditUserId(null) }}>
+          <div className="rounded-2xl shadow-2xl w-full max-w-xs" style={{ background: 'var(--bg-card)', animation: 'modalIn 0.2s ease-out' }}
+            onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between p-5" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+              <h2 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('vacay.changeColor')}</h2>
+              <button onClick={() => { setShowColorPicker(false); setColorEditUserId(null) }} className="p-1.5 rounded-lg transition-colors" style={{ color: 'var(--text-faint)' }}>
+                <X size={16} />
+              </button>
+            </div>
+            <div className="p-5">
+              <div className="flex flex-wrap gap-2 justify-center">
+                {PRESET_COLORS.map(c => (
+                  <button key={c} onClick={() => handleColorChange(c)}
+                    className={`w-8 h-8 rounded-full transition-all ${editingUserColor === c ? 'ring-2 ring-offset-2 scale-110' : 'hover:scale-110'}`}
+                    style={{ backgroundColor: c }} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  )
+}

client/src/components/Vacay/VacaySettings.jsx

@@ -0,0 +1,213 @@
+import React, { useState, useEffect } from 'react'
+import { MapPin, CalendarOff, AlertCircle, Building2, Unlink, ArrowRightLeft, Globe } from 'lucide-react'
+import { useVacayStore } from '../../store/vacayStore'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import CustomSelect from '../shared/CustomSelect'
+import apiClient from '../../api/client'
+
+export default function VacaySettings({ onClose }) {
+  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 { language } = useTranslation()
+
+  // Load available countries with localized names
+  useEffect(() => {
+    apiClient.get('/addons/vacay/holidays/countries').then(r => {
+      let displayNames
+      try { displayNames = new Intl.DisplayNames([language === 'de' ? 'de' : 'en'], { type: 'region' }) } catch { /* */ }
+      const list = r.data.map(c => ({
+        value: c.countryCode,
+        label: displayNames ? (displayNames.of(c.countryCode) || c.name) : c.name,
+      }))
+      list.sort((a, b) => a.label.localeCompare(b.label))
+      setCountries(list)
+    }).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 })
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* Block weekends */}
+      <SettingToggle
+        icon={CalendarOff}
+        label={t('vacay.blockWeekends')}
+        hint={t('vacay.blockWeekendsHint')}
+        value={plan.block_weekends}
+        onChange={() => toggle('block_weekends')}
+      />
+
+      {/* Carry-over */}
+      <SettingToggle
+        icon={ArrowRightLeft}
+        label={t('vacay.carryOver')}
+        hint={t('vacay.carryOverHint')}
+        value={plan.carry_over_enabled}
+        onChange={() => toggle('carry_over_enabled')}
+      />
+
+      {/* Company holidays */}
+      <div>
+        <SettingToggle
+          icon={Building2}
+          label={t('vacay.companyHolidays')}
+          hint={t('vacay.companyHolidaysHint')}
+          value={plan.company_holidays_enabled}
+          onChange={() => toggle('company_holidays_enabled')}
+        />
+        {plan.company_holidays_enabled && (
+          <div className="ml-7 mt-2">
+            <div className="flex items-center gap-1.5 px-2 py-1.5 rounded-md" style={{ background: 'var(--bg-secondary)' }}>
+              <AlertCircle size={12} style={{ color: 'var(--text-faint)' }} />
+              <span className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{t('vacay.companyHolidaysNoDeduct')}</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Public holidays */}
+      <div>
+        <SettingToggle
+          icon={Globe}
+          label={t('vacay.publicHolidays')}
+          hint={t('vacay.publicHolidaysHint')}
+          value={plan.holidays_enabled}
+          onChange={() => toggle('holidays_enabled')}
+        />
+        {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
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Dissolve fusion */}
+      {isFused && (
+        <div className="pt-4 mt-2 border-t" style={{ borderColor: 'var(--border-secondary)' }}>
+          <div className="rounded-xl overflow-hidden" style={{ border: '1px solid rgba(239,68,68,0.2)' }}>
+            <div className="px-4 py-3 flex items-center gap-3" style={{ background: 'rgba(239,68,68,0.06)' }}>
+              <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'rgba(239,68,68,0.1)' }}>
+                <Unlink size={16} className="text-red-500" />
+              </div>
+              <div>
+                <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('vacay.dissolve')}</p>
+                <p className="text-[11px]" style={{ color: 'var(--text-faint)' }}>{t('vacay.dissolveHint')}</p>
+              </div>
+            </div>
+            <div className="px-4 py-3 flex items-center gap-2 flex-wrap" style={{ borderTop: '1px solid rgba(239,68,68,0.1)' }}>
+              {users.map(u => (
+                <div key={u.id} className="flex items-center gap-1.5 px-2 py-1 rounded-md" style={{ background: 'var(--bg-secondary)' }}>
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: u.color || '#6366f1' }} />
+                  <span className="text-xs font-medium" style={{ color: 'var(--text-primary)' }}>{u.username}</span>
+                </div>
+              ))}
+            </div>
+            <div className="px-4 py-3" style={{ borderTop: '1px solid rgba(239,68,68,0.1)' }}>
+              <button
+                onClick={async () => {
+                  await dissolve()
+                  toast.success(t('vacay.dissolved'))
+                  onClose()
+                }}
+                className="w-full px-3 py-2 text-xs font-medium bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
+              >
+                {t('vacay.dissolveAction')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function SettingToggle({ icon: Icon, label, hint, value, onChange }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-2 min-w-0">
+        <Icon size={15} className="shrink-0" style={{ color: 'var(--text-muted)' }} />
+        <div className="min-w-0">
+          <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
+          <p className="text-[11px]" style={{ color: 'var(--text-faint)' }}>{hint}</p>
+        </div>
+      </div>
+      <button onClick={onChange}
+        className="relative shrink-0 inline-flex h-6 w-11 items-center rounded-full transition-colors"
+        style={{ background: value ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+        <span className="absolute left-1 h-4 w-4 rounded-full transition-transform duration-200"
+          style={{ background: 'var(--bg-card)', transform: value ? 'translateX(20px)' : 'translateX(0)' }} />
+      </button>
+    </div>
+  )
+}

client/src/components/Vacay/VacayStats.jsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react'
+import { Briefcase, Pencil } from 'lucide-react'
+import { useVacayStore } from '../../store/vacayStore'
+import { useAuthStore } from '../../store/authStore'
+import { useTranslation } from '../../i18n'
+
+export default function VacayStats() {
+  const { t } = useTranslation()
+  const { stats, selectedYear, loadStats, updateVacationDays, isFused } = useVacayStore()
+  const { user: currentUser } = useAuthStore()
+
+  useEffect(() => { loadStats(selectedYear) }, [selectedYear])
+
+  return (
+    <div className="rounded-xl border p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+      <div className="flex items-center gap-1.5 mb-3">
+        <Briefcase size={13} style={{ color: 'var(--text-faint)' }} />
+        <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--text-faint)' }}>
+          {t('vacay.entitlement')} {selectedYear}
+        </span>
+      </div>
+
+      {stats.length === 0 ? (
+        <p className="text-[11px] text-center py-3" style={{ color: 'var(--text-faint)' }}>{t('vacay.noData')}</p>
+      ) : (
+        <div className="space-y-2">
+          {stats.map(s => (
+            <StatCard
+              key={s.user_id}
+              stat={s}
+              isMe={s.user_id === currentUser?.id}
+              canEdit={s.user_id === currentUser?.id || isFused}
+              selectedYear={selectedYear}
+              onSave={updateVacationDays}
+              t={t}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function StatCard({ stat: s, isMe, canEdit, selectedYear, onSave, t }) {
+  const [editing, setEditing] = useState(false)
+  const [localDays, setLocalDays] = useState(s.vacation_days)
+  const pct = s.total_available > 0 ? Math.min(100, (s.used / s.total_available) * 100) : 0
+
+  // Sync local state when stats reload from server
+  useEffect(() => {
+    if (!editing) setLocalDays(s.vacation_days)
+  }, [s.vacation_days, editing])
+
+  const handleSave = () => {
+    setEditing(false)
+    const days = parseInt(localDays)
+    if (!isNaN(days) && days >= 0 && days <= 365 && days !== s.vacation_days) {
+      onSave(selectedYear, days, s.user_id)
+    }
+  }
+
+  return (
+    <div className="rounded-lg p-2.5 space-y-2" style={{ border: '1px solid var(--border-secondary)' }}>
+      <div className="flex items-center gap-2">
+        <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: s.person_color }} />
+        <span className="text-xs font-semibold flex-1 truncate" style={{ color: 'var(--text-primary)' }}>
+          {s.person_name}
+          {isMe && <span style={{ color: 'var(--text-faint)' }}> ({t('vacay.you')})</span>}
+        </span>
+        <span className="text-[10px] tabular-nums" style={{ color: 'var(--text-faint)' }}>{s.used}/{s.total_available}</span>
+      </div>
+      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--bg-secondary)' }}>
+        <div className="h-full rounded-full transition-all duration-500" style={{ width: `${pct}%`, backgroundColor: s.person_color }} />
+      </div>
+      <div className="grid grid-cols-3 gap-1.5">
+        {/* Days — editable */}
+        <div
+          className="rounded-md px-2 py-2 group/days"
+          style={{
+            background: canEdit ? 'var(--bg-card)' : 'var(--bg-secondary)',
+            border: canEdit ? '1px solid var(--border-primary)' : '1px solid transparent',
+            cursor: canEdit ? 'pointer' : 'default',
+          }}
+          onClick={() => { if (canEdit && !editing) setEditing(true) }}
+        >
+          <div className="text-[10px] mb-1" style={{ color: 'var(--text-faint)', height: 14, lineHeight: '14px' }}>
+            {t('vacay.entitlementDays')} {canEdit && !editing && <Pencil size={9} className="inline opacity-0 group-hover/days:opacity-100 transition-opacity" style={{ color: 'var(--text-faint)', verticalAlign: 'middle' }} />}
+          </div>
+          {editing ? (
+            <input
+              type="number"
+              value={localDays}
+              onChange={e => setLocalDays(e.target.value)}
+              onBlur={handleSave}
+              onKeyDown={e => { if (e.key === 'Enter') handleSave(); if (e.key === 'Escape') { setEditing(false); setLocalDays(s.vacation_days) } }}
+              autoFocus
+              className="w-full bg-transparent text-sm font-bold outline-none p-0 m-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+              style={{ color: 'var(--text-primary)', height: 18, lineHeight: '18px' }}
+            />
+          ) : (
+            <div className="text-sm font-bold" style={{ color: 'var(--text-primary)', height: 18, lineHeight: '18px' }}>{s.vacation_days}</div>
+          )}
+        </div>
+        {/* Used */}
+        <div className="rounded-md px-2 py-2" style={{ background: 'var(--bg-secondary)' }}>
+          <div className="text-[10px] mb-1" style={{ color: 'var(--text-faint)', height: 14, lineHeight: '14px' }}>{t('vacay.used')}</div>
+          <div className="text-sm font-bold" style={{ color: 'var(--text-primary)', height: 18, lineHeight: '18px' }}>{s.used}</div>
+        </div>
+        {/* Remaining */}
+        <div className="rounded-md px-2 py-2" style={{ background: 'var(--bg-secondary)' }}>
+          <div className="text-[10px] mb-1" style={{ color: 'var(--text-faint)', height: 14, lineHeight: '14px' }}>{t('vacay.remaining')}</div>
+          <div className="text-sm font-bold" style={{ color: s.remaining < 0 ? '#ef4444' : s.remaining <= 3 ? '#f59e0b' : '#22c55e', height: 18, lineHeight: '18px' }}>
+            {s.remaining}
+          </div>
+        </div>
+      </div>
+      {s.carried_over > 0 && (
+        <div className="flex items-center gap-1.5 px-2 py-1 rounded-md" style={{ background: 'rgba(245,158,11,0.08)', border: '1px solid rgba(245,158,11,0.15)' }}>
+          <span className="text-[10px]" style={{ color: '#d97706' }}>+{s.carried_over} {t('vacay.carriedOver', { year: selectedYear - 1 })}</span>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Vacay/holidays.js

@@ -0,0 +1,146 @@
+// German public holidays (Feiertage) calculation per Bundesland
+// Includes fixed and Easter-dependent movable holidays
+
+const BUNDESLAENDER = {
+  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',
+};
+
+// Gauss Easter algorithm
+function easterSunday(year) {
+  const a = year % 19;
+  const b = Math.floor(year / 100);
+  const c = year % 100;
+  const d = Math.floor(b / 4);
+  const e = b % 4;
+  const f = Math.floor((b + 8) / 25);
+  const g = Math.floor((b - f + 1) / 3);
+  const h = (19 * a + b - d - g + 15) % 30;
+  const i = Math.floor(c / 4);
+  const k = c % 4;
+  const l = (32 + 2 * e + 2 * i - h - k) % 7;
+  const m = Math.floor((a + 11 * h + 22 * l) / 451);
+  const month = Math.floor((h + l - 7 * m + 114) / 31);
+  const day = ((h + l - 7 * m + 114) % 31) + 1;
+  return new Date(year, month - 1, day);
+}
+
+function addDays(date, days) {
+  const d = new Date(date);
+  d.setDate(d.getDate() + days);
+  return d;
+}
+
+function fmt(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+export function getHolidays(year, bundesland = 'NW') {
+  const easter = easterSunday(year);
+  const holidays = {};
+
+  // Fixed holidays (nationwide)
+  holidays[`${year}-01-01`] = 'Neujahr';
+  holidays[`${year}-05-01`] = 'Tag der Arbeit';
+  holidays[`${year}-10-03`] = 'Tag der Deutschen Einheit';
+  holidays[`${year}-12-25`] = '1. Weihnachtsfeiertag';
+  holidays[`${year}-12-26`] = '2. Weihnachtsfeiertag';
+
+  // Easter-dependent (nationwide)
+  holidays[fmt(addDays(easter, -2))] = 'Karfreitag';
+  holidays[fmt(addDays(easter, 1))] = 'Ostermontag';
+  holidays[fmt(addDays(easter, 39))] = 'Christi Himmelfahrt';
+  holidays[fmt(addDays(easter, 50))] = 'Pfingstmontag';
+
+  // State-specific
+  const bl = bundesland.toUpperCase();
+
+  // Heilige Drei Könige (6. Jan) — BW, BY, ST
+  if (['BW', 'BY', 'ST'].includes(bl)) {
+    holidays[`${year}-01-06`] = 'Heilige Drei Könige';
+  }
+
+  // Internationaler Frauentag (8. März) — BE, MV
+  if (['BE', 'MV'].includes(bl)) {
+    holidays[`${year}-03-08`] = 'Internationaler Frauentag';
+  }
+
+  // Fronleichnam — BW, BY, HE, NW, RP, SL, SN (teilweise), TH (teilweise)
+  if (['BW', 'BY', 'HE', 'NW', 'RP', 'SL'].includes(bl)) {
+    holidays[fmt(addDays(easter, 60))] = 'Fronleichnam';
+  }
+
+  // Mariä Himmelfahrt (15. Aug) — SL, BY (teilweise)
+  if (['SL'].includes(bl)) {
+    holidays[`${year}-08-15`] = 'Mariä Himmelfahrt';
+  }
+
+  // Weltkindertag (20. Sep) — TH
+  if (bl === 'TH') {
+    holidays[`${year}-09-20`] = 'Weltkindertag';
+  }
+
+  // Reformationstag (31. Okt) — BB, HB, HH, MV, NI, SN, ST, SH, TH
+  if (['BB', 'HB', 'HH', 'MV', 'NI', 'SN', 'ST', 'SH', 'TH'].includes(bl)) {
+    holidays[`${year}-10-31`] = 'Reformationstag';
+  }
+
+  // Allerheiligen (1. Nov) — BW, BY, NW, RP, SL
+  if (['BW', 'BY', 'NW', 'RP', 'SL'].includes(bl)) {
+    holidays[`${year}-11-01`] = 'Allerheiligen';
+  }
+
+  // Buß- und Bettag — SN (Mittwoch vor dem 23. November)
+  if (bl === 'SN') {
+    const nov23 = new Date(year, 10, 23);
+    let bbt = new Date(nov23);
+    while (bbt.getDay() !== 3) bbt.setDate(bbt.getDate() - 1);
+    holidays[fmt(bbt)] = 'Buß- und Bettag';
+  }
+
+  return holidays;
+}
+
+export function isWeekend(dateStr) {
+  const d = new Date(dateStr + 'T00:00:00');
+  const day = d.getDay();
+  return day === 0 || day === 6;
+}
+
+export function getWeekday(dateStr) {
+  const d = new Date(dateStr + 'T00:00:00');
+  return ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][d.getDay()];
+}
+
+export function getWeekdayFull(dateStr) {
+  const d = new Date(dateStr + 'T00:00:00');
+  return ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'][d.getDay()];
+}
+
+export function daysInMonth(year, month) {
+  return new Date(year, month, 0).getDate();
+}
+
+export function formatDate(dateStr) {
+  const d = new Date(dateStr + 'T00:00:00');
+  return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' });
+}
+
+export { BUNDESLAENDER };

client/src/components/shared/Modal.jsx

@@ -39,8 +39,8 @@ export default function Modal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center px-4 modal-backdrop"
-      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 20 }}
+      className="fixed inset-0 z-50 flex items-start sm:items-center justify-center px-4 modal-backdrop"
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 20, overflow: 'hidden' }}
       onMouseDown={e => { mouseDownTarget.current = e.target }}
       onClick={e => {
         if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) onClose()
@@ -50,7 +50,7 @@ export default function Modal({
       <div
         className={`
           rounded-2xl shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
-          flex flex-col max-h-[90vh]
+          flex flex-col max-h-[calc(100vh-90px)]
           animate-in fade-in zoom-in-95 duration-200
         `}
         style={{

client/src/i18n/translations/de.js

@@ -48,6 +48,9 @@ const de = {
   'dashboard.subtitle.activeMany': '{count} aktive Reisen',
   'dashboard.subtitle.archivedSuffix': ' · {count} archiviert',
   'dashboard.newTrip': 'Neue Reise',
+  'dashboard.currency': 'Währung',
+  'dashboard.timezone': 'Zeitzonen',
+  'dashboard.localTime': 'Lokal',
   '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',
@@ -227,6 +230,7 @@ const de = {
   'admin.allowRegistration': 'Registrierung erlauben',
   'admin.allowRegistrationHint': 'Neue Benutzer können sich selbst registrieren',
   'admin.apiKeys': 'API-Schlüssel',
+  'admin.apiKeysHint': 'Optional. Aktiviert erweiterte Ortsdaten wie Fotos und Wetter.',
   'admin.mapsKey': 'Google Maps API Key',
   'admin.mapsKeyHint': 'Für Ortsuche benötigt. Erstellen unter console.cloud.google.com',
   'admin.mapsKeyHintLong': 'Ohne API Key wird OpenStreetMap für die Ortssuche genutzt. Mit Google API Key können zusätzlich Bilder, Bewertungen und Öffnungszeiten geladen werden. Erstellen unter console.cloud.google.com.',
@@ -244,11 +248,137 @@ const de = {
   'admin.oidcIssuerHint': 'Die OpenID Connect Issuer URL des Anbieters. z.B. https://accounts.google.com',
   'admin.oidcSaved': 'OIDC-Konfiguration gespeichert',
 
+  // Addons
+  'admin.tabs.addons': 'Addons',
+  'admin.addons.title': 'Addons',
+  'admin.addons.subtitle': 'Aktiviere oder deaktiviere Funktionen, um NOMAD 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.tripHint': 'Verfügbar als Tab innerhalb jedes Trips',
+  'admin.addons.globalHint': 'Verfügbar als eigenständiger Bereich in der Navigation',
+  'admin.addons.toast.updated': 'Addon aktualisiert',
+  'admin.addons.toast.error': 'Addon konnte nicht aktualisiert werden',
+  'admin.addons.noAddons': 'Keine Addons verfügbar',
+
+  // Vacay addon
+  'vacay.subtitle': 'Urlaubstage planen und verwalten',
+  'vacay.settings': 'Einstellungen',
+  'vacay.year': 'Jahr',
+  'vacay.addYear': 'Jahr hinzufügen',
+  'vacay.removeYear': 'Jahr entfernen',
+  'vacay.removeYearConfirm': '{year} entfernen?',
+  'vacay.removeYearHint': 'Alle Urlaubseinträge und Betriebsferien für dieses Jahr werden unwiderruflich gelöscht.',
+  'vacay.remove': 'Entfernen',
+  'vacay.persons': 'Personen',
+  'vacay.noPersons': 'Keine Personen angelegt',
+  'vacay.addPerson': 'Person hinzufügen',
+  'vacay.editPerson': 'Person bearbeiten',
+  'vacay.removePerson': 'Person entfernen',
+  'vacay.removePersonConfirm': '{name} wirklich entfernen?',
+  'vacay.removePersonHint': 'Alle Urlaubseinträge dieser Person werden unwiderruflich gelöscht.',
+  'vacay.personName': 'Name',
+  'vacay.personNamePlaceholder': 'Name eingeben',
+  'vacay.color': 'Farbe',
+  'vacay.add': 'Hinzufügen',
+  'vacay.legend': 'Legende',
+  'vacay.publicHoliday': 'Feiertag',
+  'vacay.companyHoliday': 'Betriebsferien',
+  'vacay.weekend': 'Wochenende',
+  'vacay.modeVacation': 'Urlaub',
+  'vacay.modeCompany': 'Betriebsferien',
+  'vacay.entitlement': 'Urlaubsanspruch',
+  'vacay.entitlementDays': 'Tage',
+  'vacay.used': 'Weg',
+  'vacay.remaining': 'Rest',
+  'vacay.carriedOver': 'aus {year}',
+  'vacay.blockWeekends': 'Wochenenden sperren',
+  'vacay.blockWeekendsHint': 'Verhindert Urlaubseinträge an Samstagen und Sonntagen',
+  'vacay.publicHolidays': 'Feiertage',
+  'vacay.publicHolidaysHint': 'Feiertage im Kalender markieren',
+  'vacay.selectCountry': 'Land wählen',
+  'vacay.selectRegion': 'Region wählen (optional)',
+  'vacay.companyHolidays': 'Betriebsferien',
+  'vacay.companyHolidaysHint': 'Erlaubt das Markieren von unternehmensweiten Feiertagen',
+  'vacay.companyHolidaysNoDeduct': 'Betriebsferien werden nicht vom Urlaubskontingent abgezogen.',
+  'vacay.carryOver': 'Urlaubsmitnahme',
+  'vacay.carryOverHint': 'Resturlaub automatisch ins Folgejahr übertragen',
+  'vacay.sharing': 'Teilen',
+  'vacay.sharingHint': 'Teile deinen Urlaubsplan mit anderen NOMAD-Benutzern',
+  'vacay.owner': 'Besitzer',
+  'vacay.shareEmailPlaceholder': 'E-Mail des NOMAD-Benutzers',
+  'vacay.shareSuccess': 'Plan erfolgreich geteilt',
+  'vacay.shareError': 'Plan konnte nicht geteilt werden',
+  'vacay.dissolve': 'Fusion auflösen',
+  'vacay.dissolveHint': 'Kalender wieder trennen. Deine Einträge bleiben erhalten.',
+  'vacay.dissolveAction': 'Auflösen',
+  'vacay.dissolved': 'Kalender getrennt',
+  'vacay.fusedWith': 'Fusioniert mit',
+  'vacay.you': 'du',
+  'vacay.noData': 'Keine Daten',
+  'vacay.changeColor': 'Farbe ändern',
+  'vacay.inviteUser': 'Benutzer einladen',
+  'vacay.inviteHint': 'Lade einen anderen NOMAD-Benutzer ein, um einen gemeinsamen Urlaubskalender zu teilen.',
+  'vacay.selectUser': 'Benutzer wählen',
+  'vacay.sendInvite': 'Einladung senden',
+  'vacay.inviteSent': 'Einladung gesendet',
+  'vacay.inviteError': 'Einladung konnte nicht gesendet werden',
+  'vacay.pending': 'ausstehend',
+  'vacay.noUsersAvailable': 'Keine Benutzer verfügbar',
+  'vacay.accept': 'Annehmen',
+  'vacay.decline': 'Ablehnen',
+  'vacay.acceptFusion': 'Annehmen & Fusionieren',
+  'vacay.inviteTitle': 'Fusionsanfrage',
+  'vacay.inviteWantsToFuse': 'möchte einen Urlaubskalender mit dir teilen.',
+  'vacay.fuseInfo1': 'Beide sehen alle Urlaubseinträge in einem gemeinsamen Kalender.',
+  'vacay.fuseInfo2': 'Beide können Einträge für den jeweils anderen erstellen und bearbeiten.',
+  'vacay.fuseInfo3': 'Beide können Einträge löschen und den Urlaubsanspruch ändern.',
+  'vacay.fuseInfo4': 'Einstellungen wie Feiertage und Betriebsferien werden geteilt.',
+  'vacay.fuseInfo5': 'Die Fusion kann jederzeit von beiden Seiten aufgelöst werden. Einträge bleiben erhalten.',
+  'nav.myTrips': 'Meine Trips',
+
+  // Atlas addon
+  'atlas.subtitle': 'Dein Reise-Fußabdruck auf der Welt',
+  'atlas.countries': 'Länder',
+  'atlas.trips': 'Reisen',
+  'atlas.places': 'Orte',
+  'atlas.days': 'Tage',
+  'atlas.visitedCountries': 'Besuchte Länder',
+  'atlas.cities': 'Städte',
+  'atlas.noData': 'Noch keine Reisedaten',
+  'atlas.noDataHint': 'Erstelle einen Trip und füge Orte hinzu',
+  'atlas.lastTrip': 'Letzter Trip',
+  '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',
+  'atlas.tripIn': 'Reise in',
+  'atlas.tripsIn': 'Reisen in',
+  'atlas.since': 'seit',
+  'atlas.europe': 'Europa',
+  'atlas.asia': 'Asien',
+  'atlas.northAmerica': 'N-Amerika',
+  'atlas.southAmerica': 'S-Amerika',
+  'atlas.africa': 'Afrika',
+  'atlas.oceania': 'Ozeanien',
+  'atlas.other': 'Andere',
+  'atlas.firstVisit': 'Erste Reise',
+  'atlas.lastVisitLabel': 'Letzte Reise',
+  'atlas.tripSingular': 'Reise',
+  'atlas.tripPlural': 'Reisen',
+  'atlas.placeVisited': 'Ort besucht',
+  'atlas.placesVisited': 'Orte besucht',
+
   // Trip Planner
-  'trip.tabs.plan': 'Planung',
+  'trip.tabs.plan': 'Karte',
   'trip.tabs.reservations': 'Buchungen',
-  'trip.tabs.packing': 'Packliste',
-  'trip.tabs.packingShort': 'Packliste',
+  'trip.tabs.reservationsShort': 'Buchung',
+  'trip.tabs.packing': 'Liste',
+  'trip.tabs.packingShort': 'Liste',
   'trip.tabs.budget': 'Budget',
   'trip.tabs.files': 'Dateien',
   'trip.loading': 'Reise wird geladen...',

client/src/i18n/translations/en.js

@@ -48,6 +48,9 @@ const en = {
   'dashboard.subtitle.activeMany': '{count} active trips',
   'dashboard.subtitle.archivedSuffix': ' · {count} archived',
   'dashboard.newTrip': 'New Trip',
+  'dashboard.currency': 'Currency',
+  'dashboard.timezone': 'Timezones',
+  'dashboard.localTime': 'Local',
   'dashboard.emptyTitle': 'No trips yet',
   'dashboard.emptyText': 'Create your first trip and start planning!',
   'dashboard.emptyButton': 'Create First Trip',
@@ -227,6 +230,7 @@ const en = {
   'admin.allowRegistration': 'Allow Registration',
   'admin.allowRegistrationHint': 'New users can register themselves',
   'admin.apiKeys': 'API Keys',
+  'admin.apiKeysHint': 'Optional. Enables extended place data like photos and weather.',
   'admin.mapsKey': 'Google Maps API Key',
   'admin.mapsKeyHint': 'Required for place search. Get at console.cloud.google.com',
   'admin.mapsKeyHintLong': 'Without an API key, OpenStreetMap is used for place search. With a Google API key, photos, ratings, and opening hours can be loaded as well. Get one at console.cloud.google.com.',
@@ -244,9 +248,135 @@ const en = {
   'admin.oidcIssuerHint': 'The OpenID Connect Issuer URL of the provider. e.g. https://accounts.google.com',
   'admin.oidcSaved': 'OIDC configuration saved',
 
+  // Addons
+  'admin.tabs.addons': 'Addons',
+  'admin.addons.title': 'Addons',
+  'admin.addons.subtitle': 'Enable or disable features to customize your NOMAD experience.',
+  'admin.addons.enabled': 'Enabled',
+  'admin.addons.disabled': 'Disabled',
+  'admin.addons.type.trip': 'Trip',
+  'admin.addons.type.global': 'Global',
+  'admin.addons.tripHint': 'Available as a tab within each trip',
+  'admin.addons.globalHint': 'Available as a standalone section in the main navigation',
+  'admin.addons.toast.updated': 'Addon updated',
+  'admin.addons.toast.error': 'Failed to update addon',
+  'admin.addons.noAddons': 'No addons available',
+
+  // Vacay addon
+  'vacay.subtitle': 'Plan and manage vacation days',
+  'vacay.settings': 'Settings',
+  'vacay.year': 'Year',
+  'vacay.addYear': 'Add year',
+  'vacay.removeYear': 'Remove year',
+  'vacay.removeYearConfirm': 'Remove {year}?',
+  'vacay.removeYearHint': 'All vacation entries and company holidays for this year will be permanently deleted.',
+  'vacay.remove': 'Remove',
+  'vacay.persons': 'Persons',
+  'vacay.noPersons': 'No persons added',
+  'vacay.addPerson': 'Add Person',
+  'vacay.editPerson': 'Edit Person',
+  'vacay.removePerson': 'Remove Person',
+  'vacay.removePersonConfirm': 'Remove {name}?',
+  'vacay.removePersonHint': 'All vacation entries for this person will be permanently deleted.',
+  'vacay.personName': 'Name',
+  'vacay.personNamePlaceholder': 'Enter name',
+  'vacay.color': 'Color',
+  'vacay.add': 'Add',
+  'vacay.legend': 'Legend',
+  'vacay.publicHoliday': 'Public Holiday',
+  'vacay.companyHoliday': 'Company Holiday',
+  'vacay.weekend': 'Weekend',
+  'vacay.modeVacation': 'Vacation',
+  'vacay.modeCompany': 'Company Holiday',
+  'vacay.entitlement': 'Entitlement',
+  'vacay.entitlementDays': 'Days',
+  'vacay.used': 'Used',
+  'vacay.remaining': 'Left',
+  'vacay.carriedOver': 'from {year}',
+  'vacay.blockWeekends': 'Block Weekends',
+  'vacay.blockWeekendsHint': 'Prevent vacation entries on Saturdays and Sundays',
+  'vacay.publicHolidays': 'Public Holidays',
+  'vacay.publicHolidaysHint': 'Mark public holidays in the calendar',
+  'vacay.selectCountry': 'Select country',
+  'vacay.selectRegion': 'Select region (optional)',
+  'vacay.companyHolidays': 'Company Holidays',
+  'vacay.companyHolidaysHint': 'Allow marking company-wide holiday days',
+  'vacay.companyHolidaysNoDeduct': 'Company holidays do not count towards vacation days.',
+  'vacay.carryOver': 'Carry Over',
+  'vacay.carryOverHint': 'Automatically carry remaining vacation days into the next year',
+  'vacay.sharing': 'Sharing',
+  'vacay.sharingHint': 'Share your vacation plan with other NOMAD users',
+  'vacay.owner': 'Owner',
+  'vacay.shareEmailPlaceholder': 'Email of NOMAD user',
+  'vacay.shareSuccess': 'Plan shared successfully',
+  'vacay.shareError': 'Could not share plan',
+  'vacay.dissolve': 'Dissolve Fusion',
+  'vacay.dissolveHint': 'Separate calendars again. Your entries will be kept.',
+  'vacay.dissolveAction': 'Dissolve',
+  'vacay.dissolved': 'Calendar separated',
+  'vacay.fusedWith': 'Fused with',
+  'vacay.you': 'you',
+  'vacay.noData': 'No data',
+  'vacay.changeColor': 'Change color',
+  'vacay.inviteUser': 'Invite User',
+  'vacay.inviteHint': 'Invite another NOMAD user to share a combined vacation calendar.',
+  'vacay.selectUser': 'Select user',
+  'vacay.sendInvite': 'Send Invite',
+  'vacay.inviteSent': 'Invite sent',
+  'vacay.inviteError': 'Could not send invite',
+  'vacay.pending': 'pending',
+  'vacay.noUsersAvailable': 'No users available',
+  'vacay.accept': 'Accept',
+  'vacay.decline': 'Decline',
+  'vacay.acceptFusion': 'Accept & Fuse',
+  'vacay.inviteTitle': 'Fusion Request',
+  'vacay.inviteWantsToFuse': 'wants to share a vacation calendar with you.',
+  'vacay.fuseInfo1': 'Both of you will see all vacation entries in one shared calendar.',
+  'vacay.fuseInfo2': 'Both parties can create and edit entries for each other.',
+  'vacay.fuseInfo3': 'Both parties can delete entries and change vacation entitlements.',
+  'vacay.fuseInfo4': 'Settings like public holidays and company holidays are shared.',
+  'vacay.fuseInfo5': 'The fusion can be dissolved at any time by either party. Your entries will be preserved.',
+  'nav.myTrips': 'My Trips',
+
+  // Atlas addon
+  'atlas.subtitle': 'Your travel footprint around the world',
+  'atlas.countries': 'Countries',
+  'atlas.trips': 'Trips',
+  'atlas.places': 'Places',
+  'atlas.days': 'Days',
+  'atlas.visitedCountries': 'Visited Countries',
+  'atlas.cities': 'Cities',
+  'atlas.noData': 'No travel data yet',
+  'atlas.noDataHint': 'Create a trip and add places to see your world map',
+  'atlas.lastTrip': 'Last trip',
+  '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',
+  'atlas.tripIn': 'trip in',
+  'atlas.tripsIn': 'trips in',
+  'atlas.since': 'since',
+  'atlas.europe': 'Europe',
+  'atlas.asia': 'Asia',
+  'atlas.northAmerica': 'N. America',
+  'atlas.southAmerica': 'S. America',
+  'atlas.africa': 'Africa',
+  'atlas.oceania': 'Oceania',
+  'atlas.other': 'Other',
+  'atlas.firstVisit': 'First trip',
+  'atlas.lastVisitLabel': 'Last trip',
+  'atlas.tripSingular': 'Trip',
+  'atlas.tripPlural': 'Trips',
+  'atlas.placeVisited': 'Place visited',
+  'atlas.placesVisited': 'Places visited',
+
   // Trip Planner
   'trip.tabs.plan': 'Plan',
   'trip.tabs.reservations': 'Bookings',
+  'trip.tabs.reservationsShort': 'Book',
   'trip.tabs.packing': 'Packing List',
   'trip.tabs.packingShort': 'Packing',
   'trip.tabs.budget': 'Budget',

client/src/index.css

@@ -2,6 +2,99 @@
 @tailwind components;
 @tailwind utilities;
 
+html { height: 100%; overflow: hidden; }
+body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
+
+.atlas-tooltip {
+  background: rgba(10, 10, 20, 0.6) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
+  color: #f1f5f9 !important;
+  border: 1px solid rgba(255,255,255,0.1) !important;
+  border-radius: 14px !important;
+  padding: 10px 14px !important;
+  font-size: 12px !important;
+  font-family: inherit !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
+  transition: none !important;
+}
+.atlas-tooltip::before { border-top-color: rgba(10, 10, 20, 0.6) !important; }
+html:not(.dark) .atlas-tooltip {
+  background: rgba(255, 255, 255, 0.75) !important;
+  color: #0f172a !important;
+  border: 1px solid rgba(0,0,0,0.08) !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
+}
+html:not(.dark) .atlas-tooltip::before { border-top-color: rgba(255, 255, 255, 0.75) !important; }
+.leaflet-tooltip.atlas-tooltip { opacity: 1 !important; }
+.leaflet-tooltip-pane { transition: none !important; }
+.leaflet-fade-anim .leaflet-tooltip { transition: none !important; opacity: 1 !important; }
+
+.dark .leaflet-control-zoom a {
+  background: rgba(10, 10, 20, 0.7) !important;
+  color: #e2e8f0 !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(12px);
+}
+.dark .leaflet-control-zoom a:hover {
+  background: rgba(30, 30, 40, 0.8) !important;
+}
+@media (max-width: 767px) {
+  .leaflet-control-zoom { display: none !important; }
+}
+
+/* Dark mode overrides for pages using hardcoded slate-* Tailwind classes */
+html.dark .bg-slate-50 { background-color: var(--bg-secondary) !important; }
+html.dark .bg-white { background-color: var(--bg-card) !important; }
+html.dark .bg-slate-100 { background-color: var(--bg-secondary) !important; }
+html.dark .bg-slate-900.text-white { background-color: #e2e8f0 !important; color: #0f172a !important; }
+html.dark .border-slate-200, html.dark .border-slate-300 { border-color: var(--border-primary) !important; }
+html.dark .border-slate-100, html.dark .border-b-slate-100 { border-color: var(--border-secondary) !important; }
+html.dark .text-slate-900 { color: var(--text-primary) !important; }
+html.dark .text-slate-700 { color: var(--text-secondary) !important; }
+html.dark .text-slate-600 { color: var(--text-muted) !important; }
+html.dark .text-slate-500 { color: var(--text-muted) !important; }
+html.dark .text-slate-400 { color: var(--text-faint) !important; }
+html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover { background-color: var(--bg-hover) !important; }
+html.dark .hover\:text-slate-900:hover { color: var(--text-primary) !important; }
+html.dark .hover\:bg-slate-700:hover { background-color: var(--bg-hover) !important; }
+html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-secondary) !important; }
+html.dark .focus\:ring-slate-400:focus { --tw-ring-color: var(--text-faint) !important; }
+html.dark input[class*="border-slate"], html.dark input[class*="text-slate"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-primary) !important; }
+html.dark .text-amber-900 { color: #fbbf24 !important; }
+html.dark .text-amber-700 { color: #f59e0b !important; }
+html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.1) !important; }
+html.dark .border-amber-200 { border-color: rgba(245,158,11,0.2) !important; }
+html.dark .disabled\:bg-slate-400:disabled { background-color: var(--text-faint) !important; }
+html.dark button.bg-slate-900 { background-color: #e2e8f0 !important; color: #0f172a !important; opacity: 1 !important; }
+html.dark button.bg-slate-900:hover { background-color: #cbd5e1 !important; }
+html.dark button.bg-slate-900:disabled { background-color: #ffffff !important; color: #000000 !important; opacity: 0.4 !important; }
+html.dark span.bg-slate-900 { background-color: #e2e8f0 !important; color: #0f172a !important; }
+html.dark span.bg-slate-100 { background-color: var(--bg-secondary) !important; color: var(--text-muted) !important; }
+html.dark .border-b { border-bottom-color: var(--border-secondary) !important; }
+/* Gray variants (CategoryManager, BackupPanel) */
+html.dark .bg-gray-50 { background-color: var(--bg-secondary) !important; }
+html.dark .bg-gray-100 { background-color: var(--bg-secondary) !important; }
+html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--border-primary) !important; }
+html.dark .border-gray-100 { border-color: var(--border-secondary) !important; }
+html.dark .text-gray-900 { color: var(--text-primary) !important; }
+html.dark .text-gray-700 { color: var(--text-secondary) !important; }
+html.dark .text-gray-600 { color: var(--text-muted) !important; }
+html.dark .text-gray-500 { color: var(--text-muted) !important; }
+html.dark .text-gray-400 { color: var(--text-faint) !important; }
+html.dark .text-gray-300 { color: var(--text-faint) !important; }
+html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-200:hover { background-color: var(--bg-hover) !important; }
+html.dark .hover\:border-gray-200:hover, html.dark .hover\:border-gray-400:hover { border-color: var(--border-primary) !important; }
+html.dark input.bg-white, html.dark input[class*="bg-white"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
+html.dark .bg-gray-200 { background-color: var(--border-primary) !important; }
+html.dark .border-gray-300.border-t-slate-600 { border-color: var(--border-primary) !important; border-top-color: var(--text-primary) !important; }
+/* Modal buttons */
+html.dark button[class*="text-slate-600"][class*="border-slate-200"] { color: var(--text-muted) !important; border-color: var(--border-primary) !important; }
+html.dark button[class*="text-slate-600"][class*="border-slate-200"]:hover { background: var(--bg-hover) !important; }
+/* Dashed borders */
+html.dark .border-dashed.border-gray-300 { border-color: var(--border-primary) !important; }
+html.dark .bg-slate-50\/60, html.dark [class*="bg-slate-50/"] { background-color: transparent !important; }
+
 /* Reorder buttons: desktop = original style; mobile = always visible, larger touch targets */
 .reorder-buttons {
   flex-direction: column;

client/src/pages/AdminPage.jsx

@@ -9,6 +9,7 @@ import Modal from '../components/shared/Modal'
 import { useToast } from '../components/shared/Toast'
 import CategoryManager from '../components/Admin/CategoryManager'
 import BackupPanel from '../components/Admin/BackupPanel'
+import AddonManager from '../components/Admin/AddonManager'
 import { Users, Map, Briefcase, Shield, Trash2, Edit2, Camera, FileText, Eye, EyeOff, Save, CheckCircle, XCircle, Loader2, UserPlus } from 'lucide-react'
 import CustomSelect from '../components/shared/CustomSelect'
 
@@ -19,6 +20,7 @@ export default function AdminPage() {
   const TABS = [
     { id: 'users', label: t('admin.tabs.users') },
     { id: 'categories', label: t('admin.tabs.categories') },
+    { id: 'addons', label: t('admin.tabs.addons') },
     { id: 'settings', label: t('admin.tabs.settings') },
     { id: 'backup', label: t('admin.tabs.backup') },
   ]
@@ -204,7 +206,7 @@ export default function AdminPage() {
   }
 
   return (
-    <div className="min-h-screen bg-slate-50">
+    <div className="min-h-screen" style={{ background: 'var(--bg-secondary)' }}>
       <Navbar />
 
       <div className="pt-14">
@@ -266,12 +268,12 @@ export default function AdminPage() {
           )}
 
           {/* Tabs */}
-          <div className="flex gap-1 mb-6 bg-white border border-slate-200 rounded-xl p-1 w-fit">
+          <div className="grid grid-cols-3 sm:flex gap-1 mb-6 rounded-xl p-1" style={{ background: 'var(--bg-card)', border: '1px solid var(--border-primary)' }}>
             {TABS.map(tab => (
               <button
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}
-                className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+                className={`px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-lg transition-colors ${
                   activeTab === tab.id
                     ? 'bg-slate-900 text-white'
                     : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
@@ -286,7 +288,10 @@ export default function AdminPage() {
           {activeTab === 'users' && (
             <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
               <div className="p-5 border-b border-slate-100 flex items-center justify-between">
-                <h2 className="font-semibold text-slate-900">{t('admin.tabs.users')} ({users.length})</h2>
+                <div>
+                  <h2 className="font-semibold text-slate-900">{t('admin.tabs.users')}</h2>
+                  <p className="text-xs text-slate-400 mt-1">{users.length} {t('admin.stats.users')}</p>
+                </div>
                 <button
                   onClick={() => setShowCreateUser(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"
@@ -318,8 +323,11 @@ export default function AdminPage() {
                         <tr key={u.id} className={`hover:bg-slate-50 transition-colors ${u.id === currentUser?.id ? 'bg-slate-50/60' : ''}`}>
                           <td className="px-5 py-3">
                             <div className="flex items-center gap-2">
-                              <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center text-sm font-medium text-slate-700">
-                                {u.username.charAt(0).toUpperCase()}
+                              <div className="relative">
+                                <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center text-sm font-medium text-slate-700">
+                                  {u.username.charAt(0).toUpperCase()}
+                                </div>
+                                <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2" style={{ borderColor: 'var(--bg-card)', background: u.online ? '#22c55e' : '#94a3b8' }} />
                               </div>
                               <div>
                                 <p className="text-sm font-medium text-slate-900">{u.username}</p>
@@ -376,6 +384,8 @@ export default function AdminPage() {
 
           {activeTab === 'categories' && <CategoryManager />}
 
+          {activeTab === 'addons' && <AddonManager />}
+
           {activeTab === 'settings' && (
             <div className="space-y-6">
               {/* Registration Toggle */}
@@ -409,6 +419,7 @@ export default function AdminPage() {
               <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.apiKeys')}</h2>
+                  <p className="text-xs text-slate-400 mt-1">{t('admin.apiKeysHint')}</p>
                 </div>
                 <div className="p-6 space-y-4">
                   {/* Google Maps Key */}
@@ -529,7 +540,7 @@ export default function AdminPage() {
               <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.oidcTitle')}</h2>
-                  <p className="text-xs text-slate-400 mt-0.5">{t('admin.oidcSubtitle')}</p>
+                  <p className="text-xs text-slate-400 mt-1">{t('admin.oidcSubtitle')}</p>
                 </div>
                 <div className="p-6 space-y-4">
                   <div>

client/src/pages/AtlasPage.jsx

@@ -0,0 +1,482 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { 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 L from 'leaflet'
+
+// Convert country code to flag emoji
+function MobileStats({ data, stats, countries, resolveName, t, dark }) {
+  const tp = dark ? '#f1f5f9' : '#0f172a'
+  const tf = dark ? '#475569' : '#94a3b8'
+  const { continents, lastTrip, nextTrip, streak, firstYear, tripsThisYear } = data || {}
+  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 thisYear = new Date().getFullYear()
+
+  return (
+    <div className="space-y-4">
+      {/* Stats grid */}
+      <div className="grid grid-cols-5 gap-2">
+        {[[stats.totalCountries, t('atlas.countries')], [stats.totalTrips, t('atlas.trips')], [stats.totalPlaces, t('atlas.places')], [stats.totalCities || 0, t('atlas.cities')], [stats.totalDays, t('atlas.days')]].map(([v, l], i) => (
+          <div key={i} className="text-center py-2">
+            <p className="text-xl font-black tabular-nums" style={{ color: tp }}>{v}</p>
+            <p className="text-[9px] font-semibold uppercase tracking-wide" style={{ color: tf }}>{l}</p>
+          </div>
+        ))}
+      </div>
+      {/* Continents */}
+      <div className="grid grid-cols-6 gap-1">
+        {['Europe', 'Asia', 'North America', 'South America', 'Africa', 'Oceania'].map(cont => {
+          const count = continents?.[cont] || 0
+          return (
+            <div key={cont} className="text-center py-1">
+              <p className="text-base font-bold tabular-nums" style={{ color: count > 0 ? tp : (dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.12)') }}>{count}</p>
+              <p className="text-[8px] font-semibold uppercase" style={{ color: count > 0 ? tf : (dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)') }}>{CL[cont]}</p>
+            </div>
+          )
+        })}
+      </div>
+      {/* Highlights */}
+      <div className="flex gap-3">
+        {streak > 0 && (
+          <div className="text-center flex-1 py-2">
+            <p className="text-xl font-black tabular-nums" style={{ color: tp }}>{streak}</p>
+            <p className="text-[9px] font-semibold uppercase tracking-wide" style={{ color: tf }}>{streak === 1 ? t('atlas.yearInRow') : t('atlas.yearsInRow')}</p>
+          </div>
+        )}
+        {tripsThisYear > 0 && (
+          <div className="text-center flex-1 py-2">
+            <p className="text-xl font-black tabular-nums" style={{ color: tp }}>{tripsThisYear}</p>
+            <p className="text-[9px] font-semibold uppercase tracking-wide" style={{ color: tf }}>{tripsThisYear === 1 ? t('atlas.tripIn') : t('atlas.tripsIn')} {thisYear}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function countryCodeToFlag(code) {
+  if (!code || code.length !== 2) return ''
+  return String.fromCodePoint(...[...code.toUpperCase()].map(c => 0x1F1E6 + c.charCodeAt(0) - 65))
+}
+
+function useCountryNames(language) {
+  const [resolver, setResolver] = useState(() => (code) => code)
+  useEffect(() => {
+    try {
+      const dn = new Intl.DisplayNames([language === 'de' ? 'de' : 'en'], { type: 'region' })
+      setResolver(() => (code) => { try { return dn.of(code) } catch { return code } })
+    } catch { /* */ }
+  }, [language])
+  return resolver
+}
+
+// Map visited country codes to ISO-3166 alpha3 (GeoJSON uses alpha3)
+const A2_TO_A3 = {"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"}
+
+export default function AtlasPage() {
+  const { t, language } = useTranslation()
+  const { settings } = useSettingsStore()
+  const navigate = useNavigate()
+  const resolveName = useCountryNames(language)
+  const dark = settings.dark_mode
+  const mapRef = useRef(null)
+  const mapInstance = useRef(null)
+  const geoLayerRef = useRef(null)
+  const glareRef = useRef(null)
+  const borderGlareRef = useRef(null)
+  const panelRef = useRef(null)
+
+  const handlePanelMouseMove = (e) => {
+    if (!panelRef.current || !glareRef.current || !borderGlareRef.current) return
+    const rect = panelRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    // Subtle inner glow
+    glareRef.current.style.background = `radial-gradient(circle 300px at ${x}px ${y}px, ${dark ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.25)'} 0%, transparent 70%)`
+    glareRef.current.style.opacity = '1'
+    // 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%)`
+  }
+  const handlePanelMouseLeave = () => {
+    if (glareRef.current) glareRef.current.style.opacity = '0'
+    if (borderGlareRef.current) borderGlareRef.current.style.opacity = '0'
+  }
+
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
+  const [selectedCountry, setSelectedCountry] = useState(null)
+  const [countryDetail, setCountryDetail] = useState(null)
+  const [geoData, setGeoData] = useState(null)
+
+  // Load atlas data
+  useEffect(() => {
+    apiClient.get('/addons/atlas/stats').then(r => {
+      setData(r.data)
+      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')
+      .then(r => r.json())
+      .then(geo => setGeoData(geo))
+      .catch(() => {})
+  }, [])
+
+  // Initialize map — runs after loading is done and mapRef is available
+  useEffect(() => {
+    if (loading || !mapRef.current) return
+    if (mapInstance.current) { mapInstance.current.remove(); mapInstance.current = null }
+
+    const map = L.map(mapRef.current, {
+      center: [25, 0],
+      zoom: 3,
+      minZoom: 3,
+      maxZoom: 7,
+      zoomControl: false,
+      attributionControl: false,
+      maxBounds: [[-90, -220], [90, 220]],
+      maxBoundsViscosity: 1.0,
+      fadeAnimation: false,
+      preferCanvas: true,
+    })
+
+    L.control.zoom({ position: 'bottomright' }).addTo(map)
+
+    const tileUrl = dark
+      ? 'https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png'
+      : 'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png'
+
+    L.tileLayer(tileUrl, {
+      maxZoom: 8,
+      keepBuffer: 25,
+      updateWhenZooming: true,
+      updateWhenIdle: false,
+      tileSize: 256,
+      zoomOffset: 0,
+      crossOrigin: true,
+      loading: true,
+    }).addTo(map)
+
+    // Preload adjacent zoom level tiles
+    L.tileLayer(tileUrl, {
+      maxZoom: 8,
+      keepBuffer: 10,
+      opacity: 0,
+      tileSize: 256,
+      crossOrigin: true,
+    }).addTo(map)
+
+    mapInstance.current = map
+    return () => { map.remove(); mapInstance.current = null }
+  }, [dark, loading])
+
+  // Render GeoJSON countries
+  useEffect(() => {
+    if (!mapInstance.current || !geoData || !data) return
+
+    const visitedA3 = new Set(data.countries.map(c => A2_TO_A3[c.code]).filter(Boolean))
+    const countryMap = {}
+    data.countries.forEach(c => { if (A2_TO_A3[c.code]) countryMap[A2_TO_A3[c.code]] = c })
+
+    if (geoLayerRef.current) {
+      mapInstance.current.removeLayer(geoLayerRef.current)
+    }
+
+    // Generate deterministic color per country code
+    const VISITED_COLORS = ['#6366f1','#ec4899','#14b8a6','#f97316','#8b5cf6','#ef4444','#3b82f6','#22c55e','#06b6d4','#f43f5e','#a855f7','#10b981','#0ea5e9','#e11d48','#0d9488','#7c3aed','#2563eb','#dc2626','#059669','#d946ef']
+    // Assign colors in order of visit (by index in countries array) so no two neighbors share a color easily
+    const visitedA3List = [...visitedA3]
+    const colorMap = {}
+    visitedA3List.forEach((a3, i) => { colorMap[a3] = VISITED_COLORS[i % VISITED_COLORS.length] })
+    const colorForCode = (a3) => colorMap[a3] || VISITED_COLORS[0]
+
+    const canvasRenderer = L.canvas({ padding: 0.5, tolerance: 5 })
+
+    geoLayerRef.current = L.geoJSON(geoData, {
+      renderer: canvasRenderer,
+      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 visited = visitedA3.has(a3)
+        return {
+          fillColor: visited ? colorForCode(a3) : (dark ? '#1e1e2e' : '#e2e8f0'),
+          fillOpacity: visited ? 0.7 : 0.3,
+          color: dark ? '#333' : '#cbd5e1',
+          weight: 0.5,
+        }
+      },
+      onEachFeature: (feature, layer) => {
+        const a3 = feature.properties?.ISO_A3 || feature.properties?.ADM0_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
+        const c = countryMap[a3]
+        if (c) {
+          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 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>
+              <div style="display:flex;gap:14px">
+                <div><span style="font-size:16px;font-weight:800">${c.tripCount}</span> <span style="font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:0.05em">${c.tripCount === 1 ? t('atlas.tripSingular') : t('atlas.tripPlural')}</span></div>
+                <div><span style="font-size:16px;font-weight:800">${c.placeCount}</span> <span style="font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:0.05em">${c.placeCount === 1 ? t('atlas.placeVisited') : t('atlas.placesVisited')}</span></div>
+              </div>
+              <div style="display:flex;gap:2px;border-top:1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'};padding-top:8px">
+                <div style="flex:1;display:flex;flex-direction:column;gap:2px">
+                  <span style="font-size:9px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.4">${t('atlas.firstVisit')}</span>
+                  <span style="font-size:12px;font-weight:700">${formatDate(c.firstVisit)}</span>
+                </div>
+                <div style="flex:1;display:flex;flex-direction:column;gap:2px">
+                  <span style="font-size:9px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.4">${t('atlas.lastVisitLabel')}</span>
+                  <span style="font-size:12px;font-weight:700">${formatDate(c.lastVisit)}</span>
+                </div>
+              </div>
+              </div>
+            </div>`
+          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('mouseover', (e) => {
+            e.target.setStyle({ fillOpacity: 0.9, weight: 2, color: dark ? '#818cf8' : '#4f46e5' })
+          })
+          layer.on('mouseout', (e) => {
+            geoLayerRef.current.resetStyle(e.target)
+          })
+        }
+      }
+    }).addTo(mapInstance.current)
+  }, [geoData, data, dark])
+
+  const loadCountryDetail = async (code) => {
+    setSelectedCountry(code)
+    try {
+      const r = await apiClient.get(`/addons/atlas/country/${code}`)
+      setCountryDetail(r.data)
+    } catch { /* */ }
+  }
+
+  const stats = data?.stats || { totalTrips: 0, totalPlaces: 0, totalCountries: 0, totalDays: 0 }
+  const countries = data?.countries || []
+
+  if (loading) {
+    return (
+      <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+        <Navbar />
+        <div className="pt-14 flex items-center justify-center" style={{ minHeight: 'calc(100vh - 56px)' }}>
+          <div className="w-8 h-8 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+      <Navbar />
+      <div style={{ position: 'fixed', top: 56, left: 0, right: 0, bottom: 0 }}>
+        {/* Map */}
+        <div ref={mapRef} style={{ position: 'absolute', inset: 0, zIndex: 1, background: dark ? '#1a1a2e' : '#f0f0f0' }} />
+
+        {/* Mobile: Bottom bar */}
+        <div className="md:hidden absolute bottom-3 left-0 right-0 z-10 flex justify-center" style={{ touchAction: 'manipulation' }}>
+          <div className="flex items-center gap-4 px-5 py-4 rounded-2xl"
+            style={{ background: dark ? 'rgba(0,0,0,0.45)' : 'rgba(255,255,255,0.5)', backdropFilter: 'blur(16px)' }}>
+            {/* Countries highlighted */}
+            <div className="text-center px-3 py-1.5 rounded-xl" style={{ background: dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)' }}>
+              <p className="text-3xl font-black tabular-nums leading-none" style={{ color: 'var(--text-primary)' }}>{stats.totalCountries}</p>
+              <p className="text-[9px] font-semibold uppercase tracking-wide mt-1" style={{ color: 'var(--text-faint)' }}>{t('atlas.countries')}</p>
+            </div>
+            {[[stats.totalTrips, t('atlas.trips')], [stats.totalPlaces, t('atlas.places')], [stats.totalCities || 0, t('atlas.cities')], [stats.totalDays, t('atlas.days')]].map(([v, l], i) => (
+              <div key={i} className="text-center px-1">
+                <p className="text-xl font-black tabular-nums leading-none" style={{ color: 'var(--text-primary)' }}>{v}</p>
+                <p className="text-[9px] font-semibold uppercase tracking-wide mt-1" style={{ color: 'var(--text-faint)' }}>{l}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Desktop Panel — bottom center, glass effect */}
+        <div
+          ref={panelRef}
+          onMouseMove={handlePanelMouseMove}
+          onMouseLeave={handlePanelMouseLeave}
+          className="hidden md:flex flex-col absolute z-10 overflow-hidden transition-all duration-300"
+          style={{
+            bottom: 16,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: 'fit-content',
+            background: dark ? 'rgba(10,10,15,0.55)' : 'rgba(255,255,255,0.2)',
+            backdropFilter: 'blur(24px) saturate(180%)',
+            WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+            border: '1px solid ' + (dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'),
+            borderRadius: 20,
+            boxShadow: dark
+              ? '0 8px 32px rgba(0,0,0,0.3)'
+              : '0 8px 32px rgba(0,0,0,0.08)',
+          }}
+        >
+          {/* Liquid glass glare effect */}
+          <div ref={glareRef} className="absolute inset-0 pointer-events-none" style={{ opacity: 0, transition: 'opacity 0.3s ease', borderRadius: 20 }} />
+          {/* Border glow that follows cursor */}
+          <div ref={borderGlareRef} className="absolute inset-0 pointer-events-none" style={{
+            opacity: 0, transition: 'opacity 0.3s ease', borderRadius: 20,
+            border: dark ? '1.5px solid rgba(255,255,255,0.5)' : '2px solid rgba(0,0,0,0.15)',
+          }} />
+          <SidebarContent
+            data={data} stats={stats} countries={countries} selectedCountry={selectedCountry}
+            countryDetail={countryDetail} resolveName={resolveName}
+            onCountryClick={loadCountryDetail} onTripClick={(id) => navigate(`/trips/${id}`)}
+            t={t} dark={dark}
+          />
+        </div>
+
+
+      </div>
+    </div>
+  )
+}
+
+function SidebarContent({ data, stats, countries, selectedCountry, countryDetail, resolveName, onCountryClick, onTripClick, t, dark }) {
+  const bg = (o) => dark ? `rgba(255,255,255,${o})` : `rgba(0,0,0,${o})`
+  const tp = dark ? '#f1f5f9' : '#0f172a'
+  const tm = dark ? '#94a3b8' : '#64748b'
+  const tf = dark ? '#475569' : '#94a3b8'
+  const accent = '#818cf8'
+
+  const { mostVisited, continents, lastTrip, nextTrip, streak, firstYear, tripsThisYear } = data || {}
+  const contEntries = continents ? Object.entries(continents).sort((a, b) => b[1] - a[1]) : []
+  const maxCont = contEntries.length > 0 ? contEntries[0][1] : 1
+  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) {
+    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>
+    )
+  }
+
+  const thisYear = new Date().getFullYear()
+  const divider = `2px solid ${bg(0.08)}`
+
+  return (
+    <div className="flex items-stretch justify-center">
+
+      {/* ═══ SECTION 1: Numbers ═══ */}
+      {/* Countries hero */}
+      <div className="flex items-baseline gap-1.5 px-5 py-4 mx-2 my-2 rounded-xl" style={{ background: bg(0.08) }}>
+        <span className="text-5xl font-black tabular-nums leading-none" style={{ color: tp }}>{stats.totalCountries}</span>
+        <span className="text-sm font-medium" style={{ color: tm }}>{t('atlas.countries')}</span>
+      </div>
+      {/* Other stats */}
+      {[[stats.totalTrips, t('atlas.trips')], [stats.totalPlaces, t('atlas.places')], [stats.totalCities || 0, t('atlas.cities')], [stats.totalDays, t('atlas.days')]].map(([v, l], i) => (
+        <div key={i} className="flex flex-col items-center justify-center px-3 py-5 shrink-0">
+          <span className="text-2xl font-black tabular-nums leading-none" style={{ color: tp }}>{v}</span>
+          <span className="text-[9px] font-semibold mt-1.5 uppercase tracking-wide whitespace-nowrap" style={{ color: tf }}>{l}</span>
+        </div>
+      ))}
+
+      {/* ═══ DIVIDER ═══ */}
+      <div style={{ width: 2, background: bg(0.08), margin: '12px 14px' }} />
+
+      {/* ═══ SECTION 2: Continents ═══ */}
+      <div className="flex items-center gap-4 px-3 py-4 shrink-0">
+        {['Europe', 'Asia', 'North America', 'South America', 'Africa', 'Oceania'].map((cont) => {
+          const count = continents?.[cont] || 0
+          const active = count > 0
+          return (
+            <div key={cont} className="flex flex-col items-center shrink-0">
+              <span className="text-2xl font-black tabular-nums leading-none" style={{ color: active ? tp : bg(0.15) }}>{count}</span>
+              <span className="text-[9px] font-semibold mt-1.5 uppercase tracking-wide whitespace-nowrap" style={{ color: active ? tf : bg(0.1) }}>{CL[cont]}</span>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* ═══ DIVIDER ═══ */}
+      <div style={{ width: 2, background: bg(0.08), margin: '12px 14px' }} />
+
+      {/* ═══ SECTION 3: Highlights & Streaks ═══ */}
+      <div className="flex items-center gap-5 px-3 py-4">
+        {/* Last trip */}
+        {lastTrip && (
+          <button onClick={() => onTripClick(lastTrip.id)} className="flex items-center gap-2.5 text-left transition-opacity hover:opacity-75">
+            <div className="w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0" style={{ background: bg(0.06) }}>
+              {lastTrip.countryCode ? countryCodeToFlag(lastTrip.countryCode) : <MapPin size={16} style={{ color: tm }} />}
+            </div>
+            <div className="min-w-0">
+              <p className="text-[9px] uppercase tracking-wider font-semibold" style={{ color: tf }}>{t('atlas.lastTrip')}</p>
+              <p className="text-[13px] font-bold truncate" style={{ color: tp }}>{lastTrip.title}</p>
+            </div>
+          </button>
+        )}
+        {/* Next trip */}
+        {nextTrip && (
+          <button onClick={() => onTripClick(nextTrip.id)} className="flex items-center gap-2.5 text-left transition-opacity hover:opacity-75">
+            <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style={{ background: 'rgba(129,140,248,0.12)' }}>
+              <Calendar size={16} style={{ color: accent }} />
+            </div>
+            <div>
+              <p className="text-[9px] uppercase tracking-wider font-semibold" style={{ color: tf }}>{t('atlas.nextTrip')}</p>
+              <p className="text-[13px] font-black" style={{ color: accent }}>{nextTrip.daysUntil} {t('atlas.daysLeft')}</p>
+            </div>
+          </button>
+        )}
+        {/* Streak */}
+        {streak > 0 && (
+          <div className="flex flex-col items-center justify-center px-3">
+            <span className="text-2xl font-black tabular-nums leading-none" style={{ color: tp }}>{streak}</span>
+            <span className="text-[9px] font-semibold mt-1.5 uppercase tracking-wide text-center leading-tight" style={{ color: tf }}>
+              {streak === 1 ? t('atlas.yearInRow') : t('atlas.yearsInRow')}
+            </span>
+          </div>
+        )}
+        {/* This year */}
+        {tripsThisYear > 0 && (
+          <div className="flex flex-col items-center justify-center px-3">
+            <span className="text-2xl font-black tabular-nums leading-none" style={{ color: tp }}>{tripsThisYear}</span>
+            <span className="text-[9px] font-semibold mt-1.5 uppercase tracking-wide text-center leading-tight" style={{ color: tf }}>
+              {tripsThisYear === 1 ? t('atlas.tripIn') : t('atlas.tripsIn')} {thisYear}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* ═══ Country detail overlay ═══ */}
+      {selectedCountry && countryDetail && (
+        <>
+          <div style={{ width: 2, background: bg(0.08), margin: '12px 0' }} />
+          <div className="flex items-center gap-3 px-6 py-4">
+            <span className="text-3xl">{countryCodeToFlag(selectedCountry)}</span>
+            <div>
+              <p className="text-sm font-bold" style={{ color: tp }}>{resolveName(selectedCountry)}</p>
+              <p className="text-[10px] mb-1" style={{ color: tf }}>{countryDetail.places.length} {t('atlas.places')} · {countryDetail.trips.length} Trips</p>
+              <div className="flex flex-wrap gap-1">
+                {countryDetail.trips.slice(0, 3).map(trip => (
+                  <button key={trip.id} onClick={() => onTripClick(trip.id)}
+                    className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold transition-opacity hover:opacity-75"
+                    style={{ background: bg(0.08), color: tp }}>
+                    <Briefcase size={9} style={{ color: tm }} />
+                    {trip.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+

client/src/pages/DashboardPage.jsx

@@ -2,15 +2,17 @@ import React, { useEffect, useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { tripsApi } from '../api/client'
 import { useAuthStore } from '../store/authStore'
+import { useSettingsStore } from '../store/settingsStore'
 import { useTranslation } from '../i18n'
 import Navbar from '../components/Layout/Navbar'
 import DemoBanner from '../components/Layout/DemoBanner'
-import TravelStats from '../components/Dashboard/TravelStats'
+import CurrencyWidget from '../components/Dashboard/CurrencyWidget'
+import TimezoneWidget from '../components/Dashboard/TimezoneWidget'
 import TripFormModal from '../components/Trips/TripFormModal'
 import { useToast } from '../components/shared/Toast'
 import {
   Plus, Calendar, Trash2, Edit2, Map, ChevronDown, ChevronUp,
-  Archive, ArchiveRestore, Clock, MapPin,
+  Archive, ArchiveRestore, Clock, MapPin, Settings, X, ArrowRightLeft,
 } from 'lucide-react'
 
 const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
@@ -345,11 +347,25 @@ export default function DashboardPage() {
   const [showForm, setShowForm] = useState(false)
   const [editingTrip, setEditingTrip] = useState(null)
   const [showArchived, setShowArchived] = useState(false)
+  const [showWidgetSettings, setShowWidgetSettings] = useState(false)
 
   const navigate = useNavigate()
   const toast = useToast()
   const { t, locale } = useTranslation()
   const { demoMode } = useAuthStore()
+  const { settings, updateSetting } = useSettingsStore()
+  const showCurrency = settings.dashboard_currency !== 'off'
+  const showTimezone = settings.dashboard_timezone !== 'off'
+  const showSidebar = showCurrency || showTimezone
+
+  useEffect(() => {
+    if (showWidgetSettings === 'mobile') {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  }, [showWidgetSettings])
 
   useEffect(() => { loadTrips() }, [])
 
@@ -437,10 +453,10 @@ export default function DashboardPage() {
   const rest = spotlight ? trips.filter(t => t.id !== spotlight.id) : trips
 
   return (
-    <div style={{ minHeight: '100vh', background: 'var(--bg-secondary)', ...font }}>
+    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--bg-secondary)', ...font }}>
       <Navbar />
       {demoMode && <DemoBanner />}
-      <div style={{ paddingTop: 56 }}>
+      <div style={{ flex: 1, overflow: 'auto', overscrollBehavior: 'contain', marginTop: 56 }}>
         <div style={{ maxWidth: 1300, margin: '0 auto', padding: '32px 20px 60px' }}>
 
           {/* Header */}
@@ -453,21 +469,75 @@ export default function DashboardPage() {
                   : t('dashboard.subtitle.empty')}
               </p>
             </div>
-            <button
-              onClick={() => { setEditingTrip(null); setShowForm(true) }}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 7, padding: '9px 18px',
-                background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 12,
-                fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-              }}
-              onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
+            <div style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
+              {/* Widget settings */}
+              <button
+                onClick={() => setShowWidgetSettings(s => s ? false : true)}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  padding: '0 14px',
+                  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)' }}
+              >
+                <Settings size={15} />
+              </button>
+              <button
+                onClick={() => { setEditingTrip(null); setShowForm(true) }}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 7, padding: '9px 18px',
+                  background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 12,
+                  fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                }}
+                onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
               onMouseLeave={e => e.currentTarget.style.opacity = '1'}
             >
               <Plus size={15} /> {t('dashboard.newTrip')}
-            </button>
+              </button>
+            </div>
           </div>
 
+          {/* Widget settings dropdown */}
+          {showWidgetSettings && (
+            <div className="rounded-xl border p-3 mb-4 flex items-center gap-4" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+              <span className="text-xs font-semibold" style={{ color: 'var(--text-muted)' }}>Widgets:</span>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <button onClick={() => updateSetting('dashboard_currency', showCurrency ? 'off' : 'on')}
+                  className="relative inline-flex h-5 w-9 items-center rounded-full transition-colors"
+                  style={{ background: showCurrency ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+                  <span className="absolute left-0.5 h-4 w-4 rounded-full transition-transform duration-200"
+                    style={{ background: 'var(--bg-card)', transform: showCurrency ? 'translateX(16px)' : 'translateX(0)' }} />
+                </button>
+                <span className="text-xs" style={{ color: 'var(--text-primary)' }}>{t('dashboard.currency')}</span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <button onClick={() => updateSetting('dashboard_timezone', showTimezone ? 'off' : 'on')}
+                  className="relative inline-flex h-5 w-9 items-center rounded-full transition-colors"
+                  style={{ background: showTimezone ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+                  <span className="absolute left-0.5 h-4 w-4 rounded-full transition-transform duration-200"
+                    style={{ background: 'var(--bg-card)', transform: showTimezone ? 'translateX(16px)' : 'translateX(0)' }} />
+                </button>
+                <span className="text-xs" style={{ color: 'var(--text-primary)' }}>{t('dashboard.timezone')}</span>
+              </label>
+            </div>
+          )}
+
+          {/* Mobile widgets button */}
+          {showSidebar && (
+            <button
+              onClick={() => setShowWidgetSettings('mobile')}
+              className="lg:hidden flex items-center justify-center gap-2 w-full py-2.5 rounded-xl text-xs font-semibold mb-4"
+              style={{ background: 'var(--bg-card)', border: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}
+            >
+              <ArrowRightLeft size={13} style={{ color: 'var(--text-faint)' }} />
+              {showCurrency && showTimezone ? `${t('dashboard.currency')} & ${t('dashboard.timezone')}` : showCurrency ? t('dashboard.currency') : t('dashboard.timezone')}
+            </button>
+          )}
+
           <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
           {/* Main content */}
           <div style={{ flex: 1, minWidth: 0 }}>
@@ -562,14 +632,37 @@ export default function DashboardPage() {
           )}
           </div>
 
-          {/* Stats sidebar */}
-          <div className="hidden lg:block" style={{ position: 'sticky', top: 80, flexShrink: 0 }}>
-            <TravelStats />
-          </div>
+          {/* Widgets sidebar */}
+          {showSidebar && (
+            <div className="hidden lg:flex flex-col gap-4" style={{ position: 'sticky', top: 80, flexShrink: 0, width: 280 }}>
+              {showCurrency && <CurrencyWidget />}
+              {showTimezone && <TimezoneWidget />}
+            </div>
+          )}
           </div>
         </div>
       </div>
 
+      {/* Mobile widgets bottom sheet */}
+      {showWidgetSettings === 'mobile' && (
+        <div className="lg:hidden fixed inset-0 z-50" style={{ background: 'rgba(0,0,0,0.3)', touchAction: 'none' }} onClick={() => setShowWidgetSettings(false)}>
+          <div className="absolute bottom-0 left-0 right-0 flex flex-col overflow-hidden"
+            style={{ maxHeight: '80vh', background: 'var(--bg-card)', borderRadius: '20px 20px 0 0', overscrollBehavior: 'contain' }}
+            onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+              <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Widgets</span>
+              <button onClick={() => setShowWidgetSettings(false)} className="w-7 h-7 rounded-full flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
+                <X size={14} style={{ color: 'var(--text-primary)' }} />
+              </button>
+            </div>
+            <div className="flex-1 overflow-auto p-4 space-y-4">
+              {showCurrency && <CurrencyWidget />}
+              {showTimezone && <TimezoneWidget />}
+            </div>
+          </div>
+        </div>
+      )}
+
       <TripFormModal
         isOpen={showForm}
         onClose={() => { setShowForm(false); setEditingTrip(null) }}

client/src/pages/TripPlannerPage.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import ReactDOM from 'react-dom'
 import { useParams, useNavigate } from 'react-router-dom'
 import { useTripStore } from '../store/tripStore'
 import { useSettingsStore } from '../store/settingsStore'
@@ -19,6 +20,7 @@ import { useToast } from '../components/shared/Toast'
 import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react'
 import { useTranslation } from '../i18n'
 import { joinTrip, leaveTrip, addListener, removeListener } from '../api/websocket'
+import { addonsApi } from '../api/client'
 
 const MIN_SIDEBAR = 200
 const MAX_SIDEBAR = 520
@@ -32,12 +34,22 @@ export default function TripPlannerPage() {
   const tripStore = useTripStore()
   const { trip, days, places, assignments, packingItems, categories, reservations, budgetItems, files, selectedDayId, isLoading } = tripStore
 
+  const [enabledAddons, setEnabledAddons] = useState({ packing: true, budget: true, documents: true })
+
+  useEffect(() => {
+    addonsApi.enabled().then(data => {
+      const map = {}
+      data.addons.forEach(a => { map[a.id] = true })
+      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents })
+    }).catch(() => {})
+  }, [])
+
   const TRIP_TABS = [
     { id: 'plan', label: t('trip.tabs.plan') },
-    { id: 'buchungen', label: t('trip.tabs.reservations') },
-    { id: 'packliste', label: t('trip.tabs.packing'), shortLabel: t('trip.tabs.packingShort') },
-    { id: 'finanzplan', label: t('trip.tabs.budget') },
-    { id: 'dateien', label: t('trip.tabs.files') },
+    { id: 'buchungen', label: t('trip.tabs.reservations'), shortLabel: t('trip.tabs.reservationsShort') },
+    ...(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') }] : []),
   ]
 
   const [activeTab, setActiveTab] = useState('plan')
@@ -287,7 +299,7 @@ export default function TripPlannerPage() {
       </div>
 
       {/* Offset by navbar (56px) + tab bar (44px) */}
-      <div style={{ flex: 1, overflow: 'hidden', marginTop: 100, position: 'relative' }}>
+      <div style={{ position: 'fixed', top: 100, left: 0, right: 0, bottom: 0, overflow: 'hidden', overscrollBehavior: 'contain' }}>
 
         {activeTab === 'plan' && (
           <div style={{ position: 'absolute', inset: 0 }}>
@@ -422,16 +434,20 @@ export default function TripPlannerPage() {
               </div>
             </div>
 
-            <div className="flex md:hidden" style={{ position: 'absolute', top: 12, left: 12, right: 12, justifyContent: 'space-between', zIndex: 30 }}>
-              <button onClick={() => setMobileSidebarOpen('left')}
-                style={{ background: 'var(--bg-card)', color: 'var(--text-primary)', backdropFilter: 'blur(12px)', border: '1px solid var(--border-primary)', borderRadius: 24, padding: '11px 24px', fontSize: 15, fontWeight: 600, cursor: 'pointer', boxShadow: '0 2px 12px rgba(0,0,0,0.15)', minHeight: 44, fontFamily: 'inherit' }}>
-                {t('trip.mobilePlan')}
-              </button>
-              <button onClick={() => setMobileSidebarOpen('right')}
-                style={{ background: 'var(--bg-card)', color: 'var(--text-primary)', backdropFilter: 'blur(12px)', border: '1px solid var(--border-primary)', borderRadius: 24, padding: '11px 24px', fontSize: 15, fontWeight: 600, cursor: 'pointer', boxShadow: '0 2px 12px rgba(0,0,0,0.15)', minHeight: 44, fontFamily: 'inherit' }}>
-                {t('trip.mobilePlaces')}
-              </button>
-            </div>
+            {/* Mobile sidebar buttons — portal to body to escape Leaflet touch handling */}
+            {activeTab === 'plan' && !mobileSidebarOpen && !showPlaceForm && !showMembersModal && !showReservationModal && ReactDOM.createPortal(
+              <div className="flex md:hidden" style={{ position: 'fixed', top: 112, left: 12, right: 12, justifyContent: 'space-between', zIndex: 100, pointerEvents: 'none' }}>
+                <button onClick={() => setMobileSidebarOpen('left')}
+                  style={{ pointerEvents: 'auto', background: 'var(--bg-card)', color: 'var(--text-primary)', backdropFilter: 'blur(12px)', border: '1px solid var(--border-primary)', borderRadius: 24, padding: '11px 24px', fontSize: 15, fontWeight: 600, cursor: 'pointer', boxShadow: '0 2px 12px rgba(0,0,0,0.15)', minHeight: 44, fontFamily: 'inherit', touchAction: 'manipulation' }}>
+                  {t('trip.mobilePlan')}
+                </button>
+                <button onClick={() => setMobileSidebarOpen('right')}
+                  style={{ pointerEvents: 'auto', background: 'var(--bg-card)', color: 'var(--text-primary)', backdropFilter: 'blur(12px)', border: '1px solid var(--border-primary)', borderRadius: 24, padding: '11px 24px', fontSize: 15, fontWeight: 600, cursor: 'pointer', boxShadow: '0 2px 12px rgba(0,0,0,0.15)', minHeight: 44, fontFamily: 'inherit', touchAction: 'manipulation' }}>
+                  {t('trip.mobilePlaces')}
+                </button>
+              </div>,
+              document.body
+            )}
 
             {selectedPlace && (
               <PlaceInspector
@@ -450,9 +466,9 @@ export default function TripPlannerPage() {
               />
             )}
 
-            {mobileSidebarOpen && (
-              <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 50 }} onClick={() => setMobileSidebarOpen(null)}>
-                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'var(--bg-card)', borderRadius: '20px 20px 0 0', maxHeight: '80vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }} onClick={e => e.stopPropagation()}>
+            {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: 56, left: 0, right: 0, bottom: 0, background: 'var(--bg-card)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }} onClick={e => e.stopPropagation()}>
                   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderBottom: '1px solid var(--border-secondary)' }}>
                     <span style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>{mobileSidebarOpen === 'left' ? t('trip.mobilePlan') : t('trip.mobilePlaces')}</span>
                     <button onClick={() => setMobileSidebarOpen(null)} style={{ background: 'var(--bg-tertiary)', border: 'none', borderRadius: '50%', width: 28, height: 28, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-primary)' }}>
@@ -466,13 +482,14 @@ export default function TripPlannerPage() {
                     }
                   </div>
                 </div>
-              </div>
+              </div>,
+              document.body
             )}
           </div>
         )}
 
         {activeTab === 'buchungen' && (
-          <div style={{ height: '100%', maxWidth: 1200, margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column' }}>
+          <div style={{ height: '100%', maxWidth: 1200, margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto', overscrollBehavior: 'contain' }}>
             <ReservationsPanel
               tripId={tripId}
               reservations={reservations}
@@ -488,19 +505,19 @@ export default function TripPlannerPage() {
         )}
 
         {activeTab === 'packliste' && (
-          <div style={{ height: '100%', overflowY: 'auto', maxWidth: 1200, margin: '0 auto', width: '100%', padding: '8px 0' }}>
+          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1200, margin: '0 auto', width: '100%', padding: '8px 0' }}>
             <PackingListPanel tripId={tripId} items={packingItems} />
           </div>
         )}
 
         {activeTab === 'finanzplan' && (
-          <div style={{ height: '100%', overflowY: 'auto', maxWidth: 1400, margin: '0 auto', width: '100%', padding: '8px 0' }}>
+          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1400, margin: '0 auto', width: '100%', padding: '8px 0' }}>
             <BudgetPanel tripId={tripId} />
           </div>
         )}
 
         {activeTab === 'dateien' && (
-          <div style={{ height: '100%', overflow: 'hidden' }}>
+          <div style={{ height: '100%', overflow: 'hidden', overscrollBehavior: 'contain' }}>
             <FileManager
               files={files || []}
               onUpload={(fd) => tripStore.addFile(tripId, fd)}

client/src/pages/VacayPage.jsx

@@ -0,0 +1,282 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import ReactDOM from 'react-dom'
+import { useTranslation } from '../i18n'
+import { useVacayStore } from '../store/vacayStore'
+import { addListener, removeListener } from '../api/websocket'
+import Navbar from '../components/Layout/Navbar'
+import VacayCalendar from '../components/Vacay/VacayCalendar'
+import VacayPersons from '../components/Vacay/VacayPersons'
+import VacayStats from '../components/Vacay/VacayStats'
+import VacaySettings from '../components/Vacay/VacaySettings'
+import { Plus, Minus, ChevronLeft, ChevronRight, Settings, CalendarDays, AlertTriangle, Users, Eye, Pencil, Trash2, Unlink, ShieldCheck, SlidersHorizontal } from 'lucide-react'
+import Modal from '../components/shared/Modal'
+
+export default function VacayPage() {
+  const { t } = useTranslation()
+  const { years, selectedYear, setSelectedYear, addYear, removeYear, loadAll, loadPlan, loadEntries, loadStats, loadHolidays, loading, incomingInvites, acceptInvite, declineInvite, plan } = useVacayStore()
+  const [showSettings, setShowSettings] = useState(false)
+  const [deleteYear, setDeleteYear] = useState(null)
+  const [showMobileSidebar, setShowMobileSidebar] = useState(false)
+
+  useEffect(() => { loadAll() }, [])
+
+  // Live sync via WebSocket
+  const handleWsMessage = useCallback((msg) => {
+    if (msg.type === 'vacay:update' || msg.type === 'vacay:settings') {
+      loadPlan()
+      loadEntries(selectedYear)
+      loadStats(selectedYear)
+      if (msg.type === 'vacay:settings') loadAll()
+    }
+    if (msg.type === 'vacay:invite' || msg.type === 'vacay:accepted' || msg.type === 'vacay:declined' || msg.type === 'vacay:cancelled' || msg.type === 'vacay:dissolved') {
+      loadAll()
+    }
+  }, [selectedYear])
+
+  useEffect(() => {
+    addListener(handleWsMessage)
+    return () => removeListener(handleWsMessage)
+  }, [handleWsMessage])
+  useEffect(() => {
+    if (selectedYear) { loadEntries(selectedYear); loadStats(selectedYear); loadHolidays(selectedYear) }
+  }, [selectedYear])
+
+  const handleAddYear = () => {
+    const nextYear = years.length > 0 ? Math.max(...years) + 1 : new Date().getFullYear()
+    addYear(nextYear)
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+        <Navbar />
+        <div className="pt-14 flex items-center justify-center" style={{ minHeight: 'calc(100vh - 56px)' }}>
+          <div className="w-8 h-8 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
+        </div>
+      </div>
+    )
+  }
+
+  // Sidebar content (shared between desktop sidebar and mobile drawer)
+  const sidebarContent = (
+    <>
+      {/* Year Selector */}
+      <div className="rounded-xl border p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--text-faint)' }}>{t('vacay.year')}</span>
+          <button onClick={handleAddYear} className="p-0.5 rounded transition-colors" style={{ color: 'var(--text-faint)' }} title={t('vacay.addYear')}>
+            <Plus size={14} />
+          </button>
+        </div>
+        <div className="flex items-center justify-between mb-2">
+          <button onClick={() => { const idx = years.indexOf(selectedYear); if (idx > 0) setSelectedYear(years[idx - 1]) }} disabled={years.indexOf(selectedYear) <= 0} className="p-1 lg:p-1 p-2 rounded-lg disabled:opacity-20 transition-colors" style={{ background: 'var(--bg-secondary)' }}>
+            <ChevronLeft size={16} style={{ color: 'var(--text-muted)' }} />
+          </button>
+          <span className="text-xl font-bold tabular-nums" style={{ color: 'var(--text-primary)' }}>{selectedYear}</span>
+          <button onClick={() => { const idx = years.indexOf(selectedYear); if (idx < years.length - 1) setSelectedYear(years[idx + 1]) }} disabled={years.indexOf(selectedYear) >= years.length - 1} className="p-1 lg:p-1 p-2 rounded-lg disabled:opacity-20 transition-colors" style={{ background: 'var(--bg-secondary)' }}>
+            <ChevronRight size={16} style={{ color: 'var(--text-muted)' }} />
+          </button>
+        </div>
+        <div className="grid grid-cols-4 gap-1">
+          {years.map(y => (
+            <div key={y} onClick={() => setSelectedYear(y)}
+              className="group relative py-1.5 rounded-lg text-xs font-medium transition-all text-center cursor-pointer"
+              style={{
+                background: y === selectedYear ? 'var(--text-primary)' : 'var(--bg-secondary)',
+                color: y === selectedYear ? 'var(--bg-card)' : 'var(--text-muted)',
+              }}>
+              {y}
+              {years.length > 1 && (
+                <span onClick={e => { e.stopPropagation(); setDeleteYear(y); setShowMobileSidebar(false) }}
+                  className="absolute -top-1 -right-1 w-3.5 h-3.5 rounded-full bg-red-500 text-white text-[7px] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
+                  <Minus size={7} />
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <VacayPersons />
+
+      {/* Legend */}
+      {(plan?.holidays_enabled || plan?.company_holidays_enabled || plan?.block_weekends) && (
+        <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?.company_holidays_enabled && <LegendItem color="#fde68a" label={t('vacay.companyHoliday')} />}
+            {plan?.block_weekends && <LegendItem color="#e5e7eb" label={t('vacay.weekend')} />}
+          </div>
+        </div>
+      )}
+
+      <VacayStats />
+    </>
+  )
+
+  return (
+    <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+      <Navbar />
+
+      <div className="pt-14">
+        <div className="max-w-[1800px] mx-auto px-3 sm:px-4 py-4 sm:py-6">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-4 sm:mb-5">
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
+                <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>
+                <p className="text-xs hidden sm:block" style={{ color: 'var(--text-muted)' }}>{t('vacay.subtitle')}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {/* Mobile sidebar toggle */}
+              <button
+                onClick={() => setShowMobileSidebar(true)}
+                className="lg:hidden flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors"
+                style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
+              >
+                <SlidersHorizontal size={14} />
+              </button>
+              <button
+                onClick={() => setShowSettings(true)}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors"
+                style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
+              >
+                <Settings size={14} />
+                <span className="hidden sm:inline">{t('vacay.settings')}</span>
+              </button>
+            </div>
+          </div>
+
+          {/* Main layout */}
+          <div className="flex gap-4 items-start">
+            {/* Desktop Sidebar */}
+            <div className="hidden lg:flex w-[240px] shrink-0 flex-col gap-3 sticky top-[70px]">
+              {sidebarContent}
+            </div>
+
+            {/* Calendar */}
+            <div className="flex-1 min-w-0">
+              <VacayCalendar />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Sidebar Drawer */}
+      {showMobileSidebar && ReactDOM.createPortal(
+        <div className="fixed inset-0 lg:hidden" style={{ zIndex: 99980 }}>
+          <div className="absolute inset-0" style={{ background: 'rgba(0,0,0,0.4)' }} onClick={() => setShowMobileSidebar(false)} />
+          <div className="absolute left-0 top-0 bottom-0 w-[280px] overflow-y-auto p-3 flex flex-col gap-3"
+            style={{ background: 'var(--bg-primary)', boxShadow: '4px 0 24px rgba(0,0,0,0.15)', animation: 'slideInLeft 0.2s ease-out' }}>
+            {sidebarContent}
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Settings Modal */}
+      <Modal isOpen={showSettings} onClose={() => setShowSettings(false)} title={t('vacay.settings')} size="md">
+        <VacaySettings onClose={() => setShowSettings(false)} />
+      </Modal>
+
+      {/* Delete Year Modal */}
+      <Modal isOpen={deleteYear !== null} onClose={() => setDeleteYear(null)} title={t('vacay.removeYear')} size="sm">
+        <div className="space-y-4">
+          <div className="flex gap-3 p-3 rounded-lg" style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.15)' }}>
+            <AlertTriangle size={18} className="text-red-500 shrink-0 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+                {t('vacay.removeYearConfirm', { year: deleteYear })}
+              </p>
+              <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>
+                {t('vacay.removeYearHint')}
+              </p>
+            </div>
+          </div>
+          <div className="flex gap-3 justify-end">
+            <button onClick={() => setDeleteYear(null)} className="px-4 py-2 text-sm rounded-lg transition-colors" style={{ color: 'var(--text-muted)', border: '1px solid var(--border-primary)' }}>
+              {t('common.cancel')}
+            </button>
+            <button onClick={async () => { await removeYear(deleteYear); setDeleteYear(null) }} className="px-4 py-2 text-sm bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors">
+              {t('vacay.remove')}
+            </button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Incoming invite — forced fullscreen modal */}
+      {incomingInvites.length > 0 && ReactDOM.createPortal(
+        <div className="fixed inset-0 flex items-center justify-center px-4"
+          style={{ zIndex: 99995, backgroundColor: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)' }}>
+          {incomingInvites.map(inv => (
+            <div key={inv.id} className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
+              style={{ background: 'var(--bg-card)', animation: 'modalIn 0.25s ease-out' }}>
+              <div className="px-6 pt-6 pb-4 text-center">
+                <div className="w-14 h-14 rounded-full mx-auto mb-4 flex items-center justify-center text-lg font-bold"
+                  style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}>
+                  {inv.username?.[0]?.toUpperCase()}
+                </div>
+                <h2 className="text-lg font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
+                  {t('vacay.inviteTitle')}
+                </h2>
+                <p className="text-sm" style={{ color: 'var(--text-muted)' }}>
+                  <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>{inv.username}</span> {t('vacay.inviteWantsToFuse')}
+                </p>
+              </div>
+              <div className="px-6 pb-4 space-y-2">
+                <InfoItem icon={Eye} text={t('vacay.fuseInfo1')} />
+                <InfoItem icon={Pencil} text={t('vacay.fuseInfo2')} />
+                <InfoItem icon={Trash2} text={t('vacay.fuseInfo3')} />
+                <InfoItem icon={ShieldCheck} text={t('vacay.fuseInfo4')} />
+                <InfoItem icon={Unlink} text={t('vacay.fuseInfo5')} />
+              </div>
+              <div className="px-6 pb-6 flex gap-3">
+                <button onClick={() => declineInvite(inv.plan_id)}
+                  className="flex-1 px-4 py-2.5 text-sm font-medium rounded-xl transition-colors"
+                  style={{ color: 'var(--text-muted)', border: '1px solid var(--border-primary)' }}>
+                  {t('vacay.decline')}
+                </button>
+                <button onClick={() => acceptInvite(inv.plan_id)}
+                  className="flex-1 px-4 py-2.5 text-sm font-medium rounded-xl transition-colors"
+                  style={{ background: 'var(--text-primary)', color: 'var(--bg-card)' }}>
+                  {t('vacay.acceptFusion')}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>,
+        document.body
+      )}
+
+      <style>{`
+        @keyframes slideInLeft {
+          from { transform: translateX(-100%); }
+          to { transform: translateX(0); }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+function InfoItem({ icon: Icon, text }) {
+  return (
+    <div className="flex items-start gap-3 px-3 py-2 rounded-lg" style={{ background: 'var(--bg-secondary)' }}>
+      <Icon size={15} className="shrink-0 mt-0.5" style={{ color: 'var(--text-muted)' }} />
+      <span className="text-xs" style={{ color: 'var(--text-primary)' }}>{text}</span>
+    </div>
+  )
+}
+
+function LegendItem({ color, label }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="w-4 h-3 rounded" style={{ background: color, border: `1px solid ${color}` }} />
+      <span className="text-[11px]" style={{ color: 'var(--text-muted)' }}>{label}</span>
+    </div>
+  )
+}

client/src/store/vacayStore.js

@@ -0,0 +1,188 @@
+import { create } from 'zustand'
+import apiClient from '../api/client'
+
+const ax = apiClient
+const api = {
+  getPlan: () => ax.get('/addons/vacay/plan').then(r => r.data),
+  updatePlan: (data) => ax.put('/addons/vacay/plan', data).then(r => r.data),
+  updateColor: (color, targetUserId) => ax.put('/addons/vacay/color', { color, target_user_id: targetUserId }).then(r => r.data),
+  invite: (userId) => ax.post('/addons/vacay/invite', { user_id: userId }).then(r => r.data),
+  acceptInvite: (planId) => ax.post('/addons/vacay/invite/accept', { plan_id: planId }).then(r => r.data),
+  declineInvite: (planId) => ax.post('/addons/vacay/invite/decline', { plan_id: planId }).then(r => r.data),
+  cancelInvite: (userId) => ax.post('/addons/vacay/invite/cancel', { user_id: userId }).then(r => r.data),
+  dissolve: () => ax.post('/addons/vacay/dissolve').then(r => r.data),
+  availableUsers: () => ax.get('/addons/vacay/available-users').then(r => r.data),
+  getYears: () => ax.get('/addons/vacay/years').then(r => r.data),
+  addYear: (year) => ax.post('/addons/vacay/years', { year }).then(r => r.data),
+  removeYear: (year) => ax.delete(`/addons/vacay/years/${year}`).then(r => r.data),
+  getEntries: (year) => ax.get(`/addons/vacay/entries/${year}`).then(r => r.data),
+  toggleEntry: (date, targetUserId) => ax.post('/addons/vacay/entries/toggle', { date, target_user_id: targetUserId }).then(r => r.data),
+  toggleCompanyHoliday: (date) => ax.post('/addons/vacay/entries/company-holiday', { date }).then(r => r.data),
+  getStats: (year) => ax.get(`/addons/vacay/stats/${year}`).then(r => r.data),
+  updateStats: (year, days, targetUserId) => ax.put(`/addons/vacay/stats/${year}`, { vacation_days: days, target_user_id: targetUserId }).then(r => r.data),
+  getCountries: () => ax.get('/addons/vacay/holidays/countries').then(r => r.data),
+  getHolidays: (year, country) => ax.get(`/addons/vacay/holidays/${year}/${country}`).then(r => r.data),
+}
+
+export const useVacayStore = create((set, get) => ({
+  plan: null,
+  users: [],
+  pendingInvites: [],
+  incomingInvites: [],
+  isOwner: true,
+  isFused: false,
+  years: [],
+  entries: [],
+  companyHolidays: [],
+  stats: [],
+  selectedYear: new Date().getFullYear(),
+  selectedUserId: null,
+  holidays: {},  // date -> { name, localName }
+  loading: false,
+
+  setSelectedYear: (year) => set({ selectedYear: year }),
+  setSelectedUserId: (id) => set({ selectedUserId: id }),
+
+  loadPlan: async () => {
+    const data = await api.getPlan()
+    set({
+      plan: data.plan,
+      users: data.users,
+      pendingInvites: data.pendingInvites,
+      incomingInvites: data.incomingInvites,
+      isOwner: data.isOwner,
+      isFused: data.isFused,
+    })
+  },
+
+  updatePlan: async (updates) => {
+    const data = await api.updatePlan(updates)
+    set({ plan: data.plan })
+    await get().loadEntries()
+    await get().loadStats()
+    await get().loadHolidays()
+  },
+
+  updateColor: async (color, targetUserId) => {
+    await api.updateColor(color, targetUserId)
+    await get().loadPlan()
+    await get().loadEntries()
+  },
+
+  invite: async (userId) => {
+    await api.invite(userId)
+    await get().loadPlan()
+  },
+
+  acceptInvite: async (planId) => {
+    await api.acceptInvite(planId)
+    await get().loadAll()
+  },
+
+  declineInvite: async (planId) => {
+    await api.declineInvite(planId)
+    await get().loadPlan()
+  },
+
+  cancelInvite: async (userId) => {
+    await api.cancelInvite(userId)
+    await get().loadPlan()
+  },
+
+  dissolve: async () => {
+    await api.dissolve()
+    await get().loadAll()
+  },
+
+  loadYears: async () => {
+    const data = await api.getYears()
+    set({ years: data.years })
+    if (data.years.length > 0) {
+      set({ selectedYear: data.years[data.years.length - 1] })
+    }
+  },
+
+  addYear: async (year) => {
+    const data = await api.addYear(year)
+    set({ years: data.years })
+    await get().loadStats(year)
+  },
+
+  removeYear: async (year) => {
+    const data = await api.removeYear(year)
+    set({ years: data.years })
+  },
+
+  loadEntries: async (year) => {
+    const y = year || get().selectedYear
+    const data = await api.getEntries(y)
+    set({ entries: data.entries, companyHolidays: data.companyHolidays })
+  },
+
+  toggleEntry: async (date, targetUserId) => {
+    await api.toggleEntry(date, targetUserId)
+    await get().loadEntries()
+    await get().loadStats()
+  },
+
+  toggleCompanyHoliday: async (date) => {
+    await api.toggleCompanyHoliday(date)
+    await get().loadEntries()
+  },
+
+  loadStats: async (year) => {
+    const y = year || get().selectedYear
+    const data = await api.getStats(y)
+    set({ stats: data.stats })
+  },
+
+  updateVacationDays: async (year, days, targetUserId) => {
+    await api.updateStats(year, days, targetUserId)
+    await get().loadStats(year)
+  },
+
+  loadHolidays: async (year) => {
+    const y = year || get().selectedYear
+    const plan = get().plan
+    if (!plan?.holidays_enabled || !plan?.holidays_region) {
+      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)
+      // Check if this country HAS regional holidays
+      const hasRegions = data.some(h => h.counties && h.counties.length > 0)
+      // If country has regions but no region selected yet, only show global ones
+      // Actually: don't show ANY holidays until region is selected
+      if (hasRegions && !region) {
+        set({ holidays: {} })
+        return
+      }
+      const map = {}
+      data.forEach(h => {
+        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: {} })
+    }
+  },
+
+  loadAll: async () => {
+    set({ loading: true })
+    try {
+      await get().loadPlan()
+      await get().loadYears()
+      const year = get().selectedYear
+      await get().loadEntries(year)
+      await get().loadStats(year)
+      await get().loadHolidays(year)
+    } finally {
+      set({ loading: false })
+    }
+  },
+}))

server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nomad-server",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nomad-server",
-      "version": "2.3.4",
+      "version": "2.4.1",
       "dependencies": {
         "archiver": "^6.0.1",
         "bcryptjs": "^2.4.3",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nomad-server",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "main": "src/index.js",
   "scripts": {
     "start": "node --experimental-sqlite src/index.js",

server/src/db/database.js

@@ -211,6 +211,82 @@ function initDb() {
       sort_order INTEGER DEFAULT 0,
       created_at DATETIME DEFAULT CURRENT_TIMESTAMP
     );
+
+    -- Addon system
+    CREATE TABLE IF NOT EXISTS addons (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      description TEXT,
+      type TEXT NOT NULL DEFAULT 'global',
+      icon TEXT DEFAULT 'Puzzle',
+      enabled INTEGER DEFAULT 0,
+      config TEXT DEFAULT '{}',
+      sort_order INTEGER DEFAULT 0
+    );
+
+    -- Vacay addon tables
+    CREATE TABLE IF NOT EXISTS vacay_plans (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      owner_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+      block_weekends INTEGER DEFAULT 1,
+      holidays_enabled INTEGER DEFAULT 0,
+      holidays_region TEXT DEFAULT '',
+      company_holidays_enabled INTEGER DEFAULT 1,
+      carry_over_enabled INTEGER DEFAULT 1,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      UNIQUE(owner_id)
+    );
+
+    CREATE TABLE IF NOT EXISTS vacay_plan_members (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      plan_id INTEGER NOT NULL REFERENCES vacay_plans(id) ON DELETE CASCADE,
+      user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+      status TEXT DEFAULT 'pending',
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      UNIQUE(plan_id, user_id)
+    );
+
+    CREATE TABLE IF NOT EXISTS vacay_user_colors (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+      plan_id INTEGER NOT NULL REFERENCES vacay_plans(id) ON DELETE CASCADE,
+      color TEXT DEFAULT '#6366f1',
+      UNIQUE(user_id, plan_id)
+    );
+
+    CREATE TABLE IF NOT EXISTS vacay_years (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      plan_id INTEGER NOT NULL REFERENCES vacay_plans(id) ON DELETE CASCADE,
+      year INTEGER NOT NULL,
+      UNIQUE(plan_id, year)
+    );
+
+    CREATE TABLE IF NOT EXISTS vacay_user_years (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+      plan_id INTEGER NOT NULL REFERENCES vacay_plans(id) ON DELETE CASCADE,
+      year INTEGER NOT NULL,
+      vacation_days INTEGER DEFAULT 30,
+      carried_over INTEGER DEFAULT 0,
+      UNIQUE(user_id, plan_id, year)
+    );
+
+    CREATE TABLE IF NOT EXISTS vacay_entries (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      plan_id INTEGER NOT NULL REFERENCES vacay_plans(id) ON DELETE CASCADE,
+      user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+      date TEXT NOT NULL,
+      note TEXT DEFAULT '',
+      UNIQUE(user_id, plan_id, date)
+    );
+
+    CREATE TABLE IF NOT EXISTS vacay_company_holidays (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      plan_id INTEGER NOT NULL REFERENCES vacay_plans(id) ON DELETE CASCADE,
+      date TEXT NOT NULL,
+      note TEXT DEFAULT '',
+      UNIQUE(plan_id, date)
+    );
   `);
 
   // Create indexes for performance
@@ -307,6 +383,25 @@ function initDb() {
   } catch (err) {
     console.error('Error seeding categories:', err.message);
   }
+
+  // Seed: default addons
+  try {
+    const existingAddons = _db.prepare('SELECT COUNT(*) as count FROM addons').get();
+    if (existingAddons.count === 0) {
+      const defaultAddons = [
+        { id: 'packing', name: 'Packing List', description: 'Pack your bags with checklists per trip', type: 'trip', icon: 'ListChecks', sort_order: 0 },
+        { id: 'budget', name: 'Budget Planner', description: 'Track expenses and plan your travel budget', type: 'trip', icon: 'Wallet', sort_order: 1 },
+        { id: 'documents', name: 'Documents', description: 'Store and manage travel documents', type: 'trip', icon: 'FileText', sort_order: 2 },
+        { id: 'vacay', name: 'Vacay', description: 'Personal vacation day planner with calendar view', type: 'global', icon: 'CalendarDays', sort_order: 10 },
+        { id: 'atlas', name: 'Atlas', description: 'World map of your visited countries with travel stats', type: 'global', icon: 'Globe', sort_order: 11 },
+      ];
+      const insertAddon = _db.prepare('INSERT INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES (?, ?, ?, ?, ?, 1, ?)');
+      for (const a of defaultAddons) insertAddon.run(a.id, a.name, a.description, a.type, a.icon, a.sort_order);
+      console.log('Default addons seeded');
+    }
+  } catch (err) {
+    console.error('Error seeding addons:', err.message);
+  }
 }
 
 // Initialize on module load

server/src/index.js

@@ -91,6 +91,21 @@ app.use('/api', assignmentsRoutes);
 app.use('/api/tags', tagsRoutes);
 app.use('/api/categories', categoriesRoutes);
 app.use('/api/admin', adminRoutes);
+
+// Public addons endpoint (authenticated but not admin-only)
+const { authenticate: addonAuth } = require('./middleware/auth');
+const { db: addonDb } = require('./db/database');
+app.get('/api/addons', addonAuth, (req, res) => {
+  const addons = addonDb.prepare('SELECT id, name, type, icon, enabled FROM addons WHERE enabled = 1 ORDER BY sort_order').all();
+  res.json({ addons: addons.map(a => ({ ...a, enabled: !!a.enabled })) });
+});
+
+// Addon routes
+const vacayRoutes = require('./routes/vacay');
+app.use('/api/addons/vacay', vacayRoutes);
+const atlasRoutes = require('./routes/atlas');
+app.use('/api/addons/atlas', atlasRoutes);
+
 app.use('/api/maps', mapsRoutes);
 app.use('/api/weather', weatherRoutes);
 app.use('/api/settings', settingsRoutes);

server/src/routes/admin.js

@@ -13,7 +13,14 @@ router.get('/users', (req, res) => {
   const users = db.prepare(
     'SELECT id, username, email, role, created_at, updated_at, last_login FROM users ORDER BY created_at DESC'
   ).all();
-  res.json({ users });
+  // Add online status from WebSocket connections
+  let onlineUserIds = new Set();
+  try {
+    const { getOnlineUserIds } = require('../websocket');
+    onlineUserIds = getOnlineUserIds();
+  } catch { /* */ }
+  const usersWithStatus = users.map(u => ({ ...u, online: onlineUserIds.has(u.id) }));
+  res.json({ users: usersWithStatus });
 });
 
 // POST /api/admin/users
@@ -145,4 +152,21 @@ router.post('/save-demo-baseline', (req, res) => {
   }
 });
 
+// ── Addons ─────────────────────────────────────────────────
+
+router.get('/addons', (req, res) => {
+  const addons = db.prepare('SELECT * FROM addons ORDER BY sort_order, id').all();
+  res.json({ addons: addons.map(a => ({ ...a, enabled: !!a.enabled, config: JSON.parse(a.config || '{}') })) });
+});
+
+router.put('/addons/:id', (req, res) => {
+  const addon = db.prepare('SELECT * FROM addons WHERE id = ?').get(req.params.id);
+  if (!addon) return res.status(404).json({ error: 'Addon not found' });
+  const { enabled, config } = req.body;
+  if (enabled !== undefined) db.prepare('UPDATE addons SET enabled = ? WHERE id = ?').run(enabled ? 1 : 0, req.params.id);
+  if (config !== undefined) db.prepare('UPDATE addons SET config = ? WHERE id = ?').run(JSON.stringify(config), req.params.id);
+  const updated = db.prepare('SELECT * FROM addons WHERE id = ?').get(req.params.id);
+  res.json({ addon: { ...updated, enabled: !!updated.enabled, config: JSON.parse(updated.config || '{}') } });
+});
+
 module.exports = router;

server/src/routes/atlas.js

@@ -0,0 +1,247 @@
+const express = require('express');
+const { db } = require('../db/database');
+const { authenticate } = require('../middleware/auth');
+
+const router = express.Router();
+router.use(authenticate);
+
+// Country code lookup from coordinates (bounding box approach)
+// Covers most countries — not pixel-perfect but good enough for visited-country tracking
+const COUNTRY_BOXES = {
+  AF:[60.5,29.4,75,38.5],AL:[19,39.6,21.1,42.7],DZ:[-8.7,19,12,37.1],AD:[1.4,42.4,1.8,42.7],AO:[11.7,-18.1,24.1,-4.4],
+  AR:[-73.6,-55.1,-53.6,-21.8],AM:[43.4,38.8,46.6,41.3],AU:[112.9,-43.6,153.6,-10.7],AT:[9.5,46.4,17.2,49],AZ:[44.8,38.4,50.4,41.9],
+  BR:[-73.9,-33.8,-34.8,5.3],BE:[2.5,49.5,6.4,51.5],BG:[22.4,41.2,28.6,44.2],CA:[-141,41.7,-52.6,83.1],CL:[-75.6,-55.9,-66.9,-17.5],
+  CN:[73.6,18.2,134.8,53.6],CO:[-79.1,-4.3,-66.9,12.5],HR:[13.5,42.4,19.5,46.6],CZ:[12.1,48.6,18.9,51.1],DK:[8,54.6,15.2,57.8],
+  EG:[24.7,22,37,31.7],EE:[21.8,57.5,28.2,59.7],FI:[20.6,59.8,31.6,70.1],FR:[-5.1,41.3,9.6,51.1],DE:[5.9,47.3,15.1,55.1],
+  GR:[19.4,34.8,29.7,41.8],HU:[16,45.7,22.9,48.6],IS:[-24.5,63.4,-13.5,66.6],IN:[68.2,6.7,97.4,35.5],ID:[95.3,-11,141,5.9],
+  IR:[44.1,25.1,63.3,39.8],IQ:[38.8,29.1,48.6,37.4],IE:[-10.5,51.4,-6,55.4],IL:[34.3,29.5,35.9,33.3],IT:[6.6,36.6,18.5,47.1],
+  JP:[129.4,31.1,145.5,45.5],KE:[33.9,-4.7,41.9,5.5],KR:[126,33.2,129.6,38.6],LV:[21,55.7,28.2,58.1],LT:[21,53.9,26.8,56.5],
+  LU:[5.7,49.4,6.5,50.2],MY:[99.6,0.9,119.3,7.4],MX:[-118.4,14.5,-86.7,32.7],MA:[-13.2,27.7,-1,35.9],NL:[3.4,50.8,7.2,53.5],
+  NZ:[166.4,-47.3,178.5,-34.4],NO:[4.6,58,31.1,71.2],PK:[60.9,23.7,77.1,37.1],PE:[-81.3,-18.4,-68.7,-0.1],PH:[117,5,126.6,18.5],
+  PL:[14.1,49,24.1,54.9],PT:[-9.5,36.8,-6.2,42.2],RO:[20.2,43.6,29.7,48.3],RU:[19.6,41.2,180,81.9],SA:[34.6,16.4,55.7,32.2],
+  RS:[18.8,42.2,23,46.2],SK:[16.8,47.7,22.6,49.6],SI:[13.4,45.4,16.6,46.9],ZA:[16.5,-34.8,32.9,-22.1],ES:[-9.4,36,-0.2,43.8],
+  SE:[11.1,55.3,24.2,69.1],CH:[6,45.8,10.5,47.8],TH:[97.3,5.6,105.6,20.5],TR:[26,36,44.8,42.1],UA:[22.1,44.4,40.2,52.4],
+  AE:[51.6,22.6,56.4,26.1],GB:[-8,49.9,2,60.9],US:[-125,24.5,-66.9,49.4],VN:[102.1,8.6,109.5,23.4],
+};
+
+function getCountryFromCoords(lat, lng) {
+  for (const [code, [minLng, minLat, maxLng, maxLat]] of Object.entries(COUNTRY_BOXES)) {
+    if (lat >= minLat && lat <= maxLat && lng >= minLng && lng <= maxLng) {
+      return code;
+    }
+  }
+  return null;
+}
+
+function getCountryFromAddress(address) {
+  if (!address) return null;
+  // Take last segment after comma, trim
+  const parts = address.split(',').map(s => s.trim()).filter(Boolean);
+  if (parts.length === 0) return null;
+  const last = parts[parts.length - 1];
+  // Try to match known country names to codes
+  const NAME_TO_CODE = {
+    'germany':'DE','deutschland':'DE','france':'FR','frankreich':'FR','spain':'ES','spanien':'ES',
+    'italy':'IT','italien':'IT','united kingdom':'GB','uk':'GB','england':'GB','united states':'US',
+    'usa':'US','netherlands':'NL','niederlande':'NL','austria':'AT','österreich':'AT','switzerland':'CH',
+    'schweiz':'CH','portugal':'PT','greece':'GR','griechenland':'GR','turkey':'TR','türkei':'TR',
+    'croatia':'HR','kroatien':'HR','czech republic':'CZ','tschechien':'CZ','czechia':'CZ',
+    'poland':'PL','polen':'PL','sweden':'SE','schweden':'SE','norway':'NO','norwegen':'NO',
+    'denmark':'DK','dänemark':'DK','finland':'FI','finnland':'FI','belgium':'BE','belgien':'BE',
+    'ireland':'IE','irland':'IE','hungary':'HU','ungarn':'HU','romania':'RO','rumänien':'RO',
+    'bulgaria':'BG','bulgarien':'BG','japan':'JP','china':'CN','australia':'AU','australien':'AU',
+    'canada':'CA','kanada':'CA','mexico':'MX','mexiko':'MX','brazil':'BR','brasilien':'BR',
+    'argentina':'AR','argentinien':'AR','thailand':'TH','indonesia':'ID','indonesien':'ID',
+    'india':'IN','indien':'IN','egypt':'EG','ägypten':'EG','morocco':'MA','marokko':'MA',
+    'south africa':'ZA','südafrika':'ZA','new zealand':'NZ','neuseeland':'NZ','iceland':'IS','island':'IS',
+    'luxembourg':'LU','luxemburg':'LU','slovenia':'SI','slowenien':'SI','slovakia':'SK','slowakei':'SK',
+    'estonia':'EE','estland':'EE','latvia':'LV','lettland':'LV','lithuania':'LT','litauen':'LT',
+    'serbia':'RS','serbien':'RS','israel':'IL','russia':'RU','russland':'RU','ukraine':'UA',
+    'vietnam':'VN','south korea':'KR','südkorea':'KR','philippines':'PH','philippinen':'PH',
+    'malaysia':'MY','colombia':'CO','kolumbien':'CO','peru':'PE','chile':'CL','iran':'IR',
+    'iraq':'IQ','irak':'IQ','pakistan':'PK','kenya':'KE','kenia':'KE','nigeria':'NG',
+    'saudi arabia':'SA','saudi-arabien':'SA','albania':'AL','albanien':'AL',
+  };
+  const normalized = last.toLowerCase();
+  if (NAME_TO_CODE[normalized]) return NAME_TO_CODE[normalized];
+  // Try 2-letter code directly
+  if (last.length === 2 && last === last.toUpperCase()) return last;
+  return null;
+}
+
+// GET /api/addons/atlas/stats
+router.get('/stats', (req, res) => {
+  const userId = req.user.id;
+
+  // Get all trips (own + shared)
+  const trips = db.prepare(`
+    SELECT DISTINCT t.* FROM trips t
+    LEFT JOIN trip_members m ON m.trip_id = t.id AND m.user_id = ?
+    WHERE t.user_id = ? OR m.user_id = ?
+    ORDER BY t.start_date DESC
+  `).all(userId, userId, userId);
+
+  // Get all places from those trips
+  const tripIds = trips.map(t => t.id);
+  if (tripIds.length === 0) {
+    return res.json({ countries: [], trips: [], stats: { totalTrips: 0, totalPlaces: 0, totalCountries: 0, totalDays: 0 } });
+  }
+
+  const placeholders = tripIds.map(() => '?').join(',');
+  const places = db.prepare(`SELECT * FROM places WHERE trip_id IN (${placeholders})`).all(...tripIds);
+
+  // Extract countries
+  const countrySet = new Map(); // code -> { code, places: [], trips: Set }
+  for (const place of places) {
+    let code = getCountryFromAddress(place.address);
+    if (!code && place.lat && place.lng) {
+      code = getCountryFromCoords(place.lat, place.lng);
+    }
+    if (code) {
+      if (!countrySet.has(code)) {
+        countrySet.set(code, { code, places: [], tripIds: new Set() });
+      }
+      countrySet.get(code).places.push({ id: place.id, name: place.name, lat: place.lat, lng: place.lng });
+      countrySet.get(code).tripIds.add(place.trip_id);
+    }
+  }
+
+  // Calculate total days across all trips
+  let totalDays = 0;
+  for (const trip of trips) {
+    if (trip.start_date && trip.end_date) {
+      const start = new Date(trip.start_date);
+      const end = new Date(trip.end_date);
+      const diff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
+      if (diff > 0) totalDays += diff;
+    }
+  }
+
+  const countries = [...countrySet.values()].map(c => {
+    const countryTrips = trips.filter(t => c.tripIds.has(t.id));
+    const dates = countryTrips.map(t => t.start_date).filter(Boolean).sort();
+    return {
+      code: c.code,
+      placeCount: c.places.length,
+      tripCount: c.tripIds.size,
+      firstVisit: dates[0] || null,
+      lastVisit: dates[dates.length - 1] || null,
+    };
+  });
+
+  // Unique cities (extract city from address — second to last comma segment)
+  const citySet = new Set();
+  for (const place of places) {
+    if (place.address) {
+      const parts = place.address.split(',').map(s => s.trim()).filter(Boolean);
+      if (parts.length >= 2) citySet.add(parts[parts.length - 2]);
+      else if (parts.length === 1) citySet.add(parts[0]);
+    }
+  }
+  const totalCities = citySet.size;
+
+  // Most visited country
+  const mostVisited = countries.length > 0 ? countries.reduce((a, b) => a.placeCount > b.placeCount ? a : b) : null;
+
+  // Continent breakdown
+  const CONTINENT_MAP = {
+    AF:'Africa',AL:'Europe',DZ:'Africa',AD:'Europe',AO:'Africa',AR:'South America',AM:'Asia',AU:'Oceania',AT:'Europe',AZ:'Asia',
+    BR:'South America',BE:'Europe',BG:'Europe',CA:'North America',CL:'South America',CN:'Asia',CO:'South America',HR:'Europe',CZ:'Europe',DK:'Europe',
+    EG:'Africa',EE:'Europe',FI:'Europe',FR:'Europe',DE:'Europe',GR:'Europe',HU:'Europe',IS:'Europe',IN:'Asia',ID:'Asia',
+    IR:'Asia',IQ:'Asia',IE:'Europe',IL:'Asia',IT:'Europe',JP:'Asia',KE:'Africa',KR:'Asia',LV:'Europe',LT:'Europe',
+    LU:'Europe',MY:'Asia',MX:'North America',MA:'Africa',NL:'Europe',NZ:'Oceania',NO:'Europe',PK:'Asia',PE:'South America',PH:'Asia',
+    PL:'Europe',PT:'Europe',RO:'Europe',RU:'Europe',SA:'Asia',RS:'Europe',SK:'Europe',SI:'Europe',ZA:'Africa',ES:'Europe',
+    SE:'Europe',CH:'Europe',TH:'Asia',TR:'Europe',UA:'Europe',AE:'Asia',GB:'Europe',US:'North America',VN:'Asia',NG:'Africa',
+  };
+  const continents = {};
+  countries.forEach(c => {
+    const cont = CONTINENT_MAP[c.code] || 'Other';
+    continents[cont] = (continents[cont] || 0) + 1;
+  });
+
+  // Last trip (most recent past trip)
+  const now = new Date().toISOString().split('T')[0];
+  const pastTrips = trips.filter(t => t.end_date && t.end_date <= now).sort((a, b) => b.end_date.localeCompare(a.end_date));
+  const lastTrip = pastTrips[0] ? { id: pastTrips[0].id, title: pastTrips[0].title, start_date: pastTrips[0].start_date, end_date: pastTrips[0].end_date } : null;
+  // Find country for last trip
+  if (lastTrip) {
+    const lastTripPlaces = places.filter(p => p.trip_id === lastTrip.id);
+    for (const p of lastTripPlaces) {
+      let code = getCountryFromAddress(p.address);
+      if (!code && p.lat && p.lng) code = getCountryFromCoords(p.lat, p.lng);
+      if (code) { lastTrip.countryCode = code; break; }
+    }
+  }
+
+  // Next trip (earliest future trip)
+  const futureTrips = trips.filter(t => t.start_date && t.start_date > now).sort((a, b) => a.start_date.localeCompare(b.start_date));
+  const nextTrip = futureTrips[0] ? { id: futureTrips[0].id, title: futureTrips[0].title, start_date: futureTrips[0].start_date } : null;
+  if (nextTrip) {
+    const diff = Math.ceil((new Date(nextTrip.start_date) - new Date()) / (1000 * 60 * 60 * 24));
+    nextTrip.daysUntil = Math.max(0, diff);
+  }
+
+  // Travel streak (consecutive years with at least one trip)
+  const tripYears = new Set(trips.filter(t => t.start_date).map(t => parseInt(t.start_date.split('-')[0])));
+  let streak = 0;
+  const currentYear = new Date().getFullYear();
+  for (let y = currentYear; y >= 2000; y--) {
+    if (tripYears.has(y)) streak++;
+    else break;
+  }
+  const firstYear = tripYears.size > 0 ? Math.min(...tripYears) : null;
+
+  res.json({
+    countries,
+    stats: {
+      totalTrips: trips.length,
+      totalPlaces: places.length,
+      totalCountries: countries.length,
+      totalDays,
+      totalCities,
+    },
+    mostVisited,
+    continents,
+    lastTrip,
+    nextTrip,
+    streak,
+    firstYear,
+    tripsThisYear: trips.filter(t => t.start_date && t.start_date.startsWith(String(currentYear))).length,
+  });
+});
+
+// GET /api/addons/atlas/country/:code — details for a country
+router.get('/country/:code', (req, res) => {
+  const userId = req.user.id;
+  const code = req.params.code.toUpperCase();
+
+  const trips = db.prepare(`
+    SELECT DISTINCT t.* FROM trips t
+    LEFT JOIN trip_members m ON m.trip_id = t.id AND m.user_id = ?
+    WHERE t.user_id = ? OR m.user_id = ?
+  `).all(userId, userId, userId);
+
+  const tripIds = trips.map(t => t.id);
+  if (tripIds.length === 0) return res.json({ places: [], trips: [] });
+
+  const placeholders = tripIds.map(() => '?').join(',');
+  const places = db.prepare(`SELECT * FROM places WHERE trip_id IN (${placeholders})`).all(...tripIds);
+
+  const matchingPlaces = [];
+  const matchingTripIds = new Set();
+
+  for (const place of places) {
+    let pCode = getCountryFromAddress(place.address);
+    if (!pCode && place.lat && place.lng) pCode = getCountryFromCoords(place.lat, place.lng);
+    if (pCode === code) {
+      matchingPlaces.push({ id: place.id, name: place.name, address: place.address, lat: place.lat, lng: place.lng, trip_id: place.trip_id });
+      matchingTripIds.add(place.trip_id);
+    }
+  }
+
+  const matchingTrips = trips.filter(t => matchingTripIds.has(t.id)).map(t => ({ id: t.id, title: t.title, start_date: t.start_date, end_date: t.end_date }));
+
+  res.json({ places: matchingPlaces, trips: matchingTrips });
+});
+
+module.exports = router;

server/src/routes/vacay.js

@@ -0,0 +1,582 @@
+const express = require('express');
+const { db } = require('../db/database');
+const { authenticate } = require('../middleware/auth');
+
+// In-memory cache for holiday API results (key: "year-country", ttl: 24h)
+const holidayCache = new Map();
+const CACHE_TTL = 24 * 60 * 60 * 1000;
+
+const router = express.Router();
+router.use(authenticate);
+
+// Broadcast vacay updates to all users in the same plan
+function notifyPlanUsers(planId, excludeUserId, event = 'vacay:update') {
+  try {
+    const { broadcastToUser } = require('../websocket');
+    const plan = db.prepare('SELECT owner_id FROM vacay_plans WHERE id = ?').get(planId);
+    if (!plan) return;
+    const userIds = [plan.owner_id];
+    const members = db.prepare("SELECT user_id FROM vacay_plan_members WHERE plan_id = ? AND status = 'accepted'").all(planId);
+    members.forEach(m => userIds.push(m.user_id));
+    userIds.filter(id => id !== excludeUserId).forEach(id => broadcastToUser(id, { type: event }));
+  } catch { /* */ }
+}
+
+// ── Helpers ────────────────────────────────────────────────
+
+// Get or create the user's own plan
+function getOwnPlan(userId) {
+  let plan = db.prepare('SELECT * FROM vacay_plans WHERE owner_id = ?').get(userId);
+  if (!plan) {
+    db.prepare('INSERT INTO vacay_plans (owner_id) VALUES (?)').run(userId);
+    plan = db.prepare('SELECT * FROM vacay_plans WHERE owner_id = ?').get(userId);
+    const yr = new Date().getFullYear();
+    db.prepare('INSERT OR IGNORE INTO vacay_years (plan_id, year) VALUES (?, ?)').run(plan.id, yr);
+    // Create user config for current year
+    db.prepare('INSERT OR IGNORE INTO vacay_user_years (user_id, plan_id, year, vacation_days, carried_over) VALUES (?, ?, ?, 30, 0)').run(userId, plan.id, yr);
+  }
+  return plan;
+}
+
+// Get the plan the user is currently part of (own or fused)
+function getActivePlan(userId) {
+  // Check if user has accepted a fusion
+  const membership = db.prepare(`
+    SELECT plan_id FROM vacay_plan_members WHERE user_id = ? AND status = 'accepted'
+  `).get(userId);
+  if (membership) {
+    return db.prepare('SELECT * FROM vacay_plans WHERE id = ?').get(membership.plan_id);
+  }
+  return getOwnPlan(userId);
+}
+
+function getActivePlanId(userId) {
+  return getActivePlan(userId).id;
+}
+
+// Get all users in a plan (owner + accepted members)
+function getPlanUsers(planId) {
+  const plan = db.prepare('SELECT * FROM vacay_plans WHERE id = ?').get(planId);
+  if (!plan) return [];
+  const owner = db.prepare('SELECT id, username, email FROM users WHERE id = ?').get(plan.owner_id);
+  const members = db.prepare(`
+    SELECT u.id, u.username, u.email FROM vacay_plan_members m
+    JOIN users u ON m.user_id = u.id
+    WHERE m.plan_id = ? AND m.status = 'accepted'
+  `).all(planId);
+  return [owner, ...members];
+}
+
+// ── Plan ───────────────────────────────────────────────────
+
+router.get('/plan', (req, res) => {
+  const plan = getActivePlan(req.user.id);
+  const activePlanId = plan.id;
+
+  // Get user colors
+  const users = getPlanUsers(activePlanId).map(u => {
+    const colorRow = db.prepare('SELECT color FROM vacay_user_colors WHERE user_id = ? AND plan_id = ?').get(u.id, activePlanId);
+    return { ...u, color: colorRow?.color || '#6366f1' };
+  });
+
+  // Pending invites (sent from this plan)
+  const pendingInvites = db.prepare(`
+    SELECT m.id, m.user_id, u.username, u.email, m.created_at
+    FROM vacay_plan_members m JOIN users u ON m.user_id = u.id
+    WHERE m.plan_id = ? AND m.status = 'pending'
+  `).all(activePlanId);
+
+  // Pending invites FOR this user (from others)
+  const incomingInvites = db.prepare(`
+    SELECT m.id, m.plan_id, u.username, u.email, m.created_at
+    FROM vacay_plan_members m
+    JOIN vacay_plans p ON m.plan_id = p.id
+    JOIN users u ON p.owner_id = u.id
+    WHERE m.user_id = ? AND m.status = 'pending'
+  `).all(req.user.id);
+
+  res.json({
+    plan: {
+      ...plan,
+      block_weekends: !!plan.block_weekends,
+      holidays_enabled: !!plan.holidays_enabled,
+      company_holidays_enabled: !!plan.company_holidays_enabled,
+      carry_over_enabled: !!plan.carry_over_enabled,
+    },
+    users,
+    pendingInvites,
+    incomingInvites,
+    isOwner: plan.owner_id === req.user.id,
+    isFused: users.length > 1,
+  });
+});
+
+router.put('/plan', async (req, res) => {
+  const planId = getActivePlanId(req.user.id);
+  const { block_weekends, holidays_enabled, holidays_region, company_holidays_enabled, carry_over_enabled } = req.body;
+
+  const updates = [];
+  const params = [];
+  if (block_weekends !== undefined) { updates.push('block_weekends = ?'); params.push(block_weekends ? 1 : 0); }
+  if (holidays_enabled !== undefined) { updates.push('holidays_enabled = ?'); params.push(holidays_enabled ? 1 : 0); }
+  if (holidays_region !== undefined) { updates.push('holidays_region = ?'); params.push(holidays_region); }
+  if (company_holidays_enabled !== undefined) { updates.push('company_holidays_enabled = ?'); params.push(company_holidays_enabled ? 1 : 0); }
+
+  if (carry_over_enabled !== undefined) { updates.push('carry_over_enabled = ?'); params.push(carry_over_enabled ? 1 : 0); }
+
+  if (updates.length > 0) {
+    params.push(planId);
+    db.prepare(`UPDATE vacay_plans SET ${updates.join(', ')} WHERE id = ?`).run(...params);
+  }
+
+  // If company holidays re-enabled, remove vacation entries that overlap with company holidays
+  if (company_holidays_enabled === true) {
+    const companyDates = db.prepare('SELECT date FROM vacay_company_holidays WHERE plan_id = ?').all(planId);
+    for (const { date } of companyDates) {
+      db.prepare('DELETE FROM vacay_entries WHERE plan_id = ? AND date = ?').run(planId, date);
+    }
+  }
+
+  // If public holidays enabled (or region changed), remove vacation entries that land on holidays
+  // Only if a full region is selected (for countries that require it)
+  const updatedPlan = db.prepare('SELECT * FROM vacay_plans WHERE id = ?').get(planId);
+  if (updatedPlan.holidays_enabled && updatedPlan.holidays_region) {
+    const country = updatedPlan.holidays_region.split('-')[0];
+    const region = updatedPlan.holidays_region.includes('-') ? updatedPlan.holidays_region : null;
+    const years = db.prepare('SELECT year FROM vacay_years WHERE plan_id = ?').all(planId);
+    for (const { year } of years) {
+      try {
+        const cacheKey = `${year}-${country}`;
+        let holidays = holidayCache.get(cacheKey)?.data;
+        if (!holidays) {
+          const resp = await fetch(`https://date.nager.at/api/v3/PublicHolidays/${year}/${country}`);
+          holidays = await resp.json();
+          holidayCache.set(cacheKey, { data: holidays, time: Date.now() });
+        }
+        const hasRegions = holidays.some(h => h.counties && h.counties.length > 0);
+        // If country has regions but no region selected, skip cleanup
+        if (hasRegions && !region) continue;
+        for (const h of holidays) {
+          if (h.global || !h.counties || (region && h.counties.includes(region))) {
+            db.prepare('DELETE FROM vacay_entries WHERE plan_id = ? AND date = ?').run(planId, h.date);
+            db.prepare('DELETE FROM vacay_company_holidays WHERE plan_id = ? AND date = ?').run(planId, h.date);
+          }
+        }
+      } catch { /* API error, skip */ }
+    }
+  }
+
+  // If carry-over was just disabled, reset all carried_over values to 0
+  if (carry_over_enabled === false) {
+    db.prepare('UPDATE vacay_user_years SET carried_over = 0 WHERE plan_id = ?').run(planId);
+  }
+
+  // If carry-over was just enabled, recalculate all years
+  if (carry_over_enabled === true) {
+    const years = db.prepare('SELECT year FROM vacay_years WHERE plan_id = ? ORDER BY year').all(planId);
+    const users = getPlanUsers(planId);
+    for (let i = 0; i < years.length - 1; i++) {
+      const yr = years[i].year;
+      const nextYr = years[i + 1].year;
+      for (const u of users) {
+        const used = db.prepare("SELECT COUNT(*) as count FROM vacay_entries WHERE user_id = ? AND plan_id = ? AND date LIKE ?").get(u.id, planId, `${yr}-%`).count;
+        const config = db.prepare('SELECT * FROM vacay_user_years WHERE user_id = ? AND plan_id = ? AND year = ?').get(u.id, planId, yr);
+        const total = (config ? config.vacation_days : 30) + (config ? config.carried_over : 0);
+        const carry = Math.max(0, total - used);
+        db.prepare(`
+          INSERT INTO vacay_user_years (user_id, plan_id, year, vacation_days, carried_over) VALUES (?, ?, ?, 30, ?)
+          ON CONFLICT(user_id, plan_id, year) DO UPDATE SET carried_over = ?
+        `).run(u.id, planId, nextYr, carry, carry);
+      }
+    }
+  }
+
+  notifyPlanUsers(planId, req.user.id, 'vacay:settings');
+
+  const updated = db.prepare('SELECT * FROM vacay_plans WHERE id = ?').get(planId);
+  res.json({
+    plan: { ...updated, block_weekends: !!updated.block_weekends, holidays_enabled: !!updated.holidays_enabled, company_holidays_enabled: !!updated.company_holidays_enabled, carry_over_enabled: !!updated.carry_over_enabled }
+  });
+});
+
+// ── User color ─────────────────────────────────────────────
+
+router.put('/color', (req, res) => {
+  const { color, target_user_id } = req.body;
+  const planId = getActivePlanId(req.user.id);
+  const userId = target_user_id ? parseInt(target_user_id) : req.user.id;
+  const planUsers = getPlanUsers(planId);
+  if (!planUsers.find(u => u.id === userId)) {
+    return res.status(403).json({ error: 'User not in plan' });
+  }
+  db.prepare(`
+    INSERT INTO vacay_user_colors (user_id, plan_id, color) VALUES (?, ?, ?)
+    ON CONFLICT(user_id, plan_id) DO UPDATE SET color = excluded.color
+  `).run(userId, planId, color || '#6366f1');
+  notifyPlanUsers(planId, req.user.id, 'vacay:update');
+  res.json({ success: true });
+});
+
+// ── Invite / Accept / Decline / Dissolve ───────────────────
+
+// Invite a user
+router.post('/invite', (req, res) => {
+  const { user_id } = req.body;
+  if (!user_id) return res.status(400).json({ error: 'user_id required' });
+  if (user_id === req.user.id) return res.status(400).json({ error: 'Cannot invite yourself' });
+
+  const targetUser = db.prepare('SELECT id, username FROM users WHERE id = ?').get(user_id);
+  if (!targetUser) return res.status(404).json({ error: 'User not found' });
+
+  const plan = getActivePlan(req.user.id);
+
+  // Check if already invited or member
+  const existing = db.prepare('SELECT id, status FROM vacay_plan_members WHERE plan_id = ? AND user_id = ?').get(plan.id, user_id);
+  if (existing) {
+    if (existing.status === 'accepted') return res.status(400).json({ error: 'Already fused' });
+    if (existing.status === 'pending') return res.status(400).json({ error: 'Invite already pending' });
+  }
+
+  // Check if target user is already fused with someone else
+  const targetFusion = db.prepare("SELECT id FROM vacay_plan_members WHERE user_id = ? AND status = 'accepted'").get(user_id);
+  if (targetFusion) return res.status(400).json({ error: 'User is already fused with another plan' });
+
+  db.prepare('INSERT INTO vacay_plan_members (plan_id, user_id, status) VALUES (?, ?, ?)').run(plan.id, user_id, 'pending');
+
+  // Broadcast via WebSocket if available
+  try {
+    const { broadcastToUser } = require('../websocket');
+    broadcastToUser(user_id, {
+      type: 'vacay:invite',
+      from: { id: req.user.id, username: req.user.username },
+      planId: plan.id,
+    });
+  } catch { /* websocket not available */ }
+
+  res.json({ success: true });
+});
+
+// Accept invite
+router.post('/invite/accept', (req, res) => {
+  const { plan_id } = req.body;
+  const invite = db.prepare("SELECT * FROM vacay_plan_members WHERE plan_id = ? AND user_id = ? AND status = 'pending'").get(plan_id, req.user.id);
+  if (!invite) return res.status(404).json({ error: 'No pending invite' });
+
+  // Accept
+  db.prepare("UPDATE vacay_plan_members SET status = 'accepted' WHERE id = ?").run(invite.id);
+
+  // Migrate user's own entries into the fused plan
+  const ownPlan = db.prepare('SELECT id FROM vacay_plans WHERE owner_id = ?').get(req.user.id);
+  if (ownPlan && ownPlan.id !== plan_id) {
+    // Move entries
+    db.prepare('UPDATE vacay_entries SET plan_id = ? WHERE plan_id = ? AND user_id = ?').run(plan_id, ownPlan.id, req.user.id);
+    // Copy year configs
+    const ownYears = db.prepare('SELECT * FROM vacay_user_years WHERE user_id = ? AND plan_id = ?').all(req.user.id, ownPlan.id);
+    for (const y of ownYears) {
+      db.prepare('INSERT OR IGNORE INTO vacay_user_years (user_id, plan_id, year, vacation_days, carried_over) VALUES (?, ?, ?, ?, ?)').run(req.user.id, plan_id, y.year, y.vacation_days, y.carried_over);
+    }
+    // Copy color
+    const colorRow = db.prepare('SELECT color FROM vacay_user_colors WHERE user_id = ? AND plan_id = ?').get(req.user.id, ownPlan.id);
+    if (colorRow) {
+      db.prepare('INSERT OR IGNORE INTO vacay_user_colors (user_id, plan_id, color) VALUES (?, ?, ?)').run(req.user.id, plan_id, colorRow.color);
+    }
+  }
+
+  // Auto-change color if it collides with existing plan users
+  const COLORS = ['#6366f1','#ec4899','#14b8a6','#8b5cf6','#ef4444','#3b82f6','#22c55e','#06b6d4','#f43f5e','#a855f7','#10b981','#0ea5e9','#64748b','#be185d','#0d9488'];
+  const existingColors = db.prepare('SELECT color FROM vacay_user_colors WHERE plan_id = ? AND user_id != ?').all(plan_id, req.user.id).map(r => r.color);
+  const myColor = db.prepare('SELECT color FROM vacay_user_colors WHERE user_id = ? AND plan_id = ?').get(req.user.id, plan_id);
+  if (myColor && existingColors.includes(myColor.color)) {
+    const available = COLORS.find(c => !existingColors.includes(c));
+    if (available) {
+      db.prepare('UPDATE vacay_user_colors SET color = ? WHERE user_id = ? AND plan_id = ?').run(available, req.user.id, plan_id);
+    }
+  }
+
+  // Ensure years exist in target plan
+  const targetYears = db.prepare('SELECT year FROM vacay_years WHERE plan_id = ?').all(plan_id);
+  for (const y of targetYears) {
+    db.prepare('INSERT OR IGNORE INTO vacay_user_years (user_id, plan_id, year, vacation_days, carried_over) VALUES (?, ?, ?, 30, 0)').run(req.user.id, plan_id, y.year);
+  }
+
+  // Notify all plan users (not just owner)
+  notifyPlanUsers(plan_id, req.user.id, 'vacay:accepted');
+
+  res.json({ success: true });
+});
+
+// Decline invite
+router.post('/invite/decline', (req, res) => {
+  const { plan_id } = req.body;
+  db.prepare("DELETE FROM vacay_plan_members WHERE plan_id = ? AND user_id = ? AND status = 'pending'").run(plan_id, req.user.id);
+
+  notifyPlanUsers(plan_id, req.user.id, 'vacay:declined');
+
+  res.json({ success: true });
+});
+
+// Cancel pending invite (by inviter)
+router.post('/invite/cancel', (req, res) => {
+  const { user_id } = req.body;
+  const plan = getActivePlan(req.user.id);
+  db.prepare("DELETE FROM vacay_plan_members WHERE plan_id = ? AND user_id = ? AND status = 'pending'").run(plan.id, user_id);
+
+  try {
+    const { broadcastToUser } = require('../websocket');
+    broadcastToUser(user_id, { type: 'vacay:cancelled' });
+  } catch { /* */ }
+
+  res.json({ success: true });
+});
+
+// Dissolve fusion
+router.post('/dissolve', (req, res) => {
+  const plan = getActivePlan(req.user.id);
+  const isOwner = plan.owner_id === req.user.id;
+
+  // Collect all user IDs and company holidays before dissolving
+  const allUserIds = getPlanUsers(plan.id).map(u => u.id);
+  const companyHolidays = db.prepare('SELECT date, note FROM vacay_company_holidays WHERE plan_id = ?').all(plan.id);
+
+  if (isOwner) {
+    const members = db.prepare("SELECT user_id FROM vacay_plan_members WHERE plan_id = ? AND status = 'accepted'").all(plan.id);
+    for (const m of members) {
+      const memberPlan = getOwnPlan(m.user_id);
+      db.prepare('UPDATE vacay_entries SET plan_id = ? WHERE plan_id = ? AND user_id = ?').run(memberPlan.id, plan.id, m.user_id);
+      // Copy company holidays to member's own plan
+      for (const ch of companyHolidays) {
+        db.prepare('INSERT OR IGNORE INTO vacay_company_holidays (plan_id, date, note) VALUES (?, ?, ?)').run(memberPlan.id, ch.date, ch.note);
+      }
+    }
+    db.prepare('DELETE FROM vacay_plan_members WHERE plan_id = ?').run(plan.id);
+  } else {
+    const ownPlan = getOwnPlan(req.user.id);
+    db.prepare('UPDATE vacay_entries SET plan_id = ? WHERE plan_id = ? AND user_id = ?').run(ownPlan.id, plan.id, req.user.id);
+    // Copy company holidays to own plan
+    for (const ch of companyHolidays) {
+      db.prepare('INSERT OR IGNORE INTO vacay_company_holidays (plan_id, date, note) VALUES (?, ?, ?)').run(ownPlan.id, ch.date, ch.note);
+    }
+    db.prepare("DELETE FROM vacay_plan_members WHERE plan_id = ? AND user_id = ?").run(plan.id, req.user.id);
+  }
+
+  // Notify all former plan members
+  try {
+    const { broadcastToUser } = require('../websocket');
+    allUserIds.filter(id => id !== req.user.id).forEach(id => broadcastToUser(id, { type: 'vacay:dissolved' }));
+  } catch { /* */ }
+
+  res.json({ success: true });
+});
+
+// ── Available users to invite ──────────────────────────────
+
+router.get('/available-users', (req, res) => {
+  const planId = getActivePlanId(req.user.id);
+  // All users except: self, already in this plan, already fused elsewhere
+  const users = db.prepare(`
+    SELECT u.id, u.username, u.email FROM users u
+    WHERE u.id != ?
+    AND u.id NOT IN (SELECT user_id FROM vacay_plan_members WHERE plan_id = ?)
+    AND u.id NOT IN (SELECT user_id FROM vacay_plan_members WHERE status = 'accepted')
+    AND u.id NOT IN (SELECT owner_id FROM vacay_plans WHERE id IN (
+      SELECT plan_id FROM vacay_plan_members WHERE status = 'accepted'
+    ))
+    ORDER BY u.username
+  `).all(req.user.id, planId);
+  res.json({ users });
+});
+
+// ── Years ──────────────────────────────────────────────────
+
+router.get('/years', (req, res) => {
+  const planId = getActivePlanId(req.user.id);
+  const years = db.prepare('SELECT year FROM vacay_years WHERE plan_id = ? ORDER BY year').all(planId);
+  res.json({ years: years.map(y => y.year) });
+});
+
+router.post('/years', (req, res) => {
+  const { year } = req.body;
+  if (!year) return res.status(400).json({ error: 'Year required' });
+  const planId = getActivePlanId(req.user.id);
+  try {
+    db.prepare('INSERT INTO vacay_years (plan_id, year) VALUES (?, ?)').run(planId, year);
+    const plan = db.prepare('SELECT * FROM vacay_plans WHERE id = ?').get(planId);
+    const carryOverEnabled = plan ? !!plan.carry_over_enabled : true;
+    const users = getPlanUsers(planId);
+    for (const u of users) {
+      // Calculate carry-over from previous year if enabled
+      let carriedOver = 0;
+      if (carryOverEnabled) {
+        const prevConfig = db.prepare('SELECT * FROM vacay_user_years WHERE user_id = ? AND plan_id = ? AND year = ?').get(u.id, planId, year - 1);
+        if (prevConfig) {
+          const used = db.prepare("SELECT COUNT(*) as count FROM vacay_entries WHERE user_id = ? AND plan_id = ? AND date LIKE ?").get(u.id, planId, `${year - 1}-%`).count;
+          const total = prevConfig.vacation_days + prevConfig.carried_over;
+          carriedOver = Math.max(0, total - used);
+        }
+      }
+      db.prepare('INSERT OR IGNORE INTO vacay_user_years (user_id, plan_id, year, vacation_days, carried_over) VALUES (?, ?, ?, 30, ?)').run(u.id, planId, year, carriedOver);
+    }
+  } catch { /* exists */ }
+  notifyPlanUsers(planId, req.user.id, 'vacay:settings');
+  const years = db.prepare('SELECT year FROM vacay_years WHERE plan_id = ? ORDER BY year').all(planId);
+  res.json({ years: years.map(y => y.year) });
+});
+
+router.delete('/years/:year', (req, res) => {
+  const year = parseInt(req.params.year);
+  const planId = getActivePlanId(req.user.id);
+  db.prepare('DELETE FROM vacay_years WHERE plan_id = ? AND year = ?').run(planId, year);
+  db.prepare("DELETE FROM vacay_entries WHERE plan_id = ? AND date LIKE ?").run(planId, `${year}-%`);
+  db.prepare("DELETE FROM vacay_company_holidays WHERE plan_id = ? AND date LIKE ?").run(planId, `${year}-%`);
+  notifyPlanUsers(planId, req.user.id, 'vacay:settings');
+  const years = db.prepare('SELECT year FROM vacay_years WHERE plan_id = ? ORDER BY year').all(planId);
+  res.json({ years: years.map(y => y.year) });
+});
+
+// ── Entries ────────────────────────────────────────────────
+
+router.get('/entries/:year', (req, res) => {
+  const year = req.params.year;
+  const planId = getActivePlanId(req.user.id);
+  const entries = db.prepare(`
+    SELECT e.*, u.username as person_name, COALESCE(c.color, '#6366f1') as person_color
+    FROM vacay_entries e
+    JOIN users u ON e.user_id = u.id
+    LEFT JOIN vacay_user_colors c ON c.user_id = e.user_id AND c.plan_id = e.plan_id
+    WHERE e.plan_id = ? AND e.date LIKE ?
+  `).all(planId, `${year}-%`);
+  const companyHolidays = db.prepare("SELECT * FROM vacay_company_holidays WHERE plan_id = ? AND date LIKE ?").all(planId, `${year}-%`);
+  res.json({ entries, companyHolidays });
+});
+
+router.post('/entries/toggle', (req, res) => {
+  const { date, target_user_id } = req.body;
+  if (!date) return res.status(400).json({ error: 'date required' });
+  const planId = getActivePlanId(req.user.id);
+  // Allow toggling for another user if they are in the same plan
+  let userId = req.user.id;
+  if (target_user_id && parseInt(target_user_id) !== req.user.id) {
+    const planUsers = getPlanUsers(planId);
+    const tid = parseInt(target_user_id);
+    if (!planUsers.find(u => u.id === tid)) {
+      return res.status(403).json({ error: 'User not in plan' });
+    }
+    userId = tid;
+  }
+  const existing = db.prepare('SELECT id FROM vacay_entries WHERE user_id = ? AND date = ? AND plan_id = ?').get(userId, date, planId);
+  if (existing) {
+    db.prepare('DELETE FROM vacay_entries WHERE id = ?').run(existing.id);
+    notifyPlanUsers(planId, req.user.id);
+    res.json({ action: 'removed' });
+  } else {
+    db.prepare('INSERT INTO vacay_entries (plan_id, user_id, date, note) VALUES (?, ?, ?, ?)').run(planId, userId, date, '');
+    notifyPlanUsers(planId, req.user.id);
+    res.json({ action: 'added' });
+  }
+});
+
+router.post('/entries/company-holiday', (req, res) => {
+  const { date, note } = req.body;
+  const planId = getActivePlanId(req.user.id);
+  const existing = db.prepare('SELECT id FROM vacay_company_holidays WHERE plan_id = ? AND date = ?').get(planId, date);
+  if (existing) {
+    db.prepare('DELETE FROM vacay_company_holidays WHERE id = ?').run(existing.id);
+    notifyPlanUsers(planId, req.user.id);
+    res.json({ action: 'removed' });
+  } else {
+    db.prepare('INSERT INTO vacay_company_holidays (plan_id, date, note) VALUES (?, ?, ?)').run(planId, date, note || '');
+    // Remove any vacation entries on this date
+    db.prepare('DELETE FROM vacay_entries WHERE plan_id = ? AND date = ?').run(planId, date);
+    notifyPlanUsers(planId, req.user.id);
+    res.json({ action: 'added' });
+  }
+});
+
+// ── Stats ──────────────────────────────────────────────────
+
+router.get('/stats/:year', (req, res) => {
+  const year = parseInt(req.params.year);
+  const planId = getActivePlanId(req.user.id);
+  const plan = db.prepare('SELECT * FROM vacay_plans WHERE id = ?').get(planId);
+  const carryOverEnabled = plan ? !!plan.carry_over_enabled : true;
+  const users = getPlanUsers(planId);
+
+  const stats = users.map(u => {
+    const used = db.prepare("SELECT COUNT(*) as count FROM vacay_entries WHERE user_id = ? AND plan_id = ? AND date LIKE ?").get(u.id, planId, `${year}-%`).count;
+    const config = db.prepare('SELECT * FROM vacay_user_years WHERE user_id = ? AND plan_id = ? AND year = ?').get(u.id, planId, year);
+    const vacationDays = config ? config.vacation_days : 30;
+    const carriedOver = carryOverEnabled ? (config ? config.carried_over : 0) : 0;
+    const total = vacationDays + carriedOver;
+    const remaining = total - used;
+    const colorRow = db.prepare('SELECT color FROM vacay_user_colors WHERE user_id = ? AND plan_id = ?').get(u.id, planId);
+
+    // Auto-update carry-over into next year (only if enabled)
+    const nextYearExists = db.prepare('SELECT id FROM vacay_years WHERE plan_id = ? AND year = ?').get(planId, year + 1);
+    if (nextYearExists && carryOverEnabled) {
+      const carry = Math.max(0, remaining);
+      db.prepare(`
+        INSERT INTO vacay_user_years (user_id, plan_id, year, vacation_days, carried_over) VALUES (?, ?, ?, 30, ?)
+        ON CONFLICT(user_id, plan_id, year) DO UPDATE SET carried_over = ?
+      `).run(u.id, planId, year + 1, carry, carry);
+    }
+
+    return {
+      user_id: u.id, person_name: u.username, person_color: colorRow?.color || '#6366f1',
+      year, vacation_days: vacationDays, carried_over: carriedOver,
+      total_available: total, used, remaining,
+    };
+  });
+
+  res.json({ stats });
+});
+
+// Update vacation days for a year (own or fused partner)
+router.put('/stats/:year', (req, res) => {
+  const year = parseInt(req.params.year);
+  const { vacation_days, target_user_id } = req.body;
+  const planId = getActivePlanId(req.user.id);
+  const userId = target_user_id ? parseInt(target_user_id) : req.user.id;
+  const planUsers = getPlanUsers(planId);
+  if (!planUsers.find(u => u.id === userId)) {
+    return res.status(403).json({ error: 'User not in plan' });
+  }
+  db.prepare(`
+    INSERT INTO vacay_user_years (user_id, plan_id, year, vacation_days, carried_over) VALUES (?, ?, ?, ?, 0)
+    ON CONFLICT(user_id, plan_id, year) DO UPDATE SET vacation_days = excluded.vacation_days
+  `).run(userId, planId, year, vacation_days);
+  notifyPlanUsers(planId, req.user.id);
+  res.json({ success: true });
+});
+
+// ── Public Holidays API (proxy to Nager.Date) ─────────────
+
+router.get('/holidays/countries', async (req, res) => {
+  const cacheKey = 'countries';
+  const cached = holidayCache.get(cacheKey);
+  if (cached && Date.now() - cached.time < CACHE_TTL) return res.json(cached.data);
+  try {
+    const resp = await fetch('https://date.nager.at/api/v3/AvailableCountries');
+    const data = await resp.json();
+    holidayCache.set(cacheKey, { data, time: Date.now() });
+    res.json(data);
+  } catch {
+    res.status(502).json({ error: 'Failed to fetch countries' });
+  }
+});
+
+router.get('/holidays/:year/:country', async (req, res) => {
+  const { year, country } = req.params;
+  const cacheKey = `${year}-${country}`;
+  const cached = holidayCache.get(cacheKey);
+  if (cached && Date.now() - cached.time < CACHE_TTL) return res.json(cached.data);
+  try {
+    const resp = await fetch(`https://date.nager.at/api/v3/PublicHolidays/${year}/${country}`);
+    const data = await resp.json();
+    holidayCache.set(cacheKey, { data, time: Date.now() });
+    res.json(data);
+  } catch {
+    res.status(502).json({ error: 'Failed to fetch holidays' });
+  }
+});
+
+module.exports = router;

server/src/websocket.js

@@ -141,4 +141,26 @@ function broadcast(tripId, eventType, payload, excludeSid) {
   }
 }
 
-module.exports = { setupWebSocket, broadcast };
+function broadcastToUser(userId, payload) {
+  if (!wss) return;
+  for (const ws of wss.clients) {
+    if (ws.readyState !== 1) continue;
+    const user = socketUser.get(ws);
+    if (user && user.id === userId) {
+      ws.send(JSON.stringify(payload));
+    }
+  }
+}
+
+function getOnlineUserIds() {
+  const ids = new Set();
+  if (!wss) return ids;
+  for (const ws of wss.clients) {
+    if (ws.readyState !== 1) continue;
+    const user = socketUser.get(ws);
+    if (user) ids.add(user.id);
+  }
+  return ids;
+}
+
+module.exports = { setupWebSocket, broadcast, broadcastToUser, getOnlineUserIds };