feat: add Ressourcen timeline view with group ordering (alpha.14)

- New timeline page showing all groups and active events in parallel
- Group order API endpoints with persistence (GET/POST /api/groups/order)
- Customizable group ordering with visual controls
- Fix CSS and TypeScript lint errors
- Update documentation and bump version to 2026.1.0-alpha.14

.github/copilot-instructions.md

@@ -6,20 +6,122 @@ Prefer explanations and refactors that align with these structures.
 
 Use this as your shared context when proposing changes. Keep edits minimal and match existing patterns referenced below.
 
+## TL;DR
+Small multi-service digital signage app (Flask API, React dashboard, MQTT scheduler). Edit `server/` for API logic, `scheduler/` for event publishing, and `dashboard/` for UI. If you're asking Copilot for changes, prefer focused prompts that include the target file(s) and the desired behavior.
+
+### How to ask Copilot
+- "Add a new route `GET /api/events/summary` that returns counts per event_type — implement in `server/routes/events.py`."
+- "Create an Alembic migration to add `duration` and `resolution` to `event_media` and update upload handler to populate them." 
+- "Refactor `scheduler/db_utils.py` to prefer precomputed EventMedia metadata and fall back to a HEAD probe." 
+- "Add an ffprobe-based worker that extracts duration/resolution/bitrate and stores them on `EventMedia`."
+
+Keep docs synced with code. When you change services/MQTT/API/UTC/env or dev/prod run steps, update this file in the same commit (see `AI-INSTRUCTIONS-MAINTENANCE.md`).
+
+### When not to change
+- Avoid editing generated assets under `dashboard/dist/` and compiled bundles. Don't modify files produced by CI or Docker builds (unless intentionally updating build outputs).
+
+### Contact / owner
+- Primary maintainer: RobbStarkAustria (owner). For architecture questions, ping the repo owner or open an issue and tag `@RobbStarkAustria`.
+
+### Important files (quick jump targets)
+- `scheduler/db_utils.py` — event formatting and scheduler-facing logic
+- `scheduler/scheduler.py` — scheduler main loop and MQTT publisher
+- `server/routes/eventmedia.py` — file uploads, streaming endpoint
+- `server/routes/events.py` — event CRUD and recurrence handling
+- `server/routes/groups.py` — group management, alive status, display order persistence
+- `dashboard/src/components/CustomEventModal.tsx` — event creation UI
+- `dashboard/src/media.tsx` — FileManager / upload settings
+- `dashboard/src/settings.tsx` — settings UI (nested tabs; system defaults for presentations and videos)
+- `dashboard/src/ressourcen.tsx` — timeline view showing all groups' active events in parallel
+- `dashboard/src/ressourcen.css` — timeline and resource view styling
+
+
+
 ## Big picture
 - Multi-service app orchestrated by Docker Compose.
   - API: Flask + SQLAlchemy (MariaDB), in `server/` exposed on :8000 (health: `/health`).
   - Dashboard: React + Vite in `dashboard/`, dev on :5173, served via Nginx in prod.
   - MQTT broker: Eclipse Mosquitto, config in `mosquitto/config/mosquitto.conf`.
-  - Listener: MQTT consumer handling discovery + heartbeats in `listener/listener.py`.
-  - Scheduler: Publishes active events (per group) to MQTT retained topics in `scheduler/scheduler.py`. Scheduler now queries a future window (default: 7 days), expands recurring events using RFC 5545 rules, applies event exceptions, and publishes all valid occurrences. Logging is concise; conversion lookups are cached and logged only once per media.
+  - Listener: MQTT consumer handling discovery, heartbeats, and dashboard screenshot uploads in `listener/listener.py`.
+  - Scheduler: Publishes only currently active events (per group, at "now") to MQTT retained topics in `scheduler/scheduler.py`. It queries a future window (default: 7 days) to expand recurring events using RFC 5545 rules and applies event exceptions, but only publishes events that are active at the current time. When a group has no active events, the scheduler clears its retained topic by publishing an empty list. All time comparisons are UTC; any naive timestamps are normalized. Logging is concise; conversion lookups are cached and logged only once per media.
   - Nginx: Reverse proxy routes `/api/*` and `/screenshots/*` to API; everything else to dashboard (`nginx.conf`).
 
+  - Dev Container (hygiene): UI-only `Dev Containers` extension runs on host UI via `remote.extensionKind`; do not install it in-container. Dashboard installs use `npm ci`; shell aliases in `postStartCommand` are appended idempotently.
+
+### Screenshot retention
+- Screenshots sent via dashboard MQTT are stored in `server/screenshots/`.
+- For each client, only the latest and last 20 timestamped screenshots are kept; older files are deleted automatically on each upload.
+
+  ## Recent changes since last commit
+
+  ### Latest (January 2026)
+  
+  - **Ressourcen Page (Timeline View)**:
+    - New 'Ressourcen' page with parallel timeline view showing active events for all room groups
+    - Compact timeline display with adjustable row height (65px per group)
+    - Real-time view of currently running events with type, title, and time window
+    - Customizable group ordering with visual reordering panel (drag up/down buttons)
+    - Group order persisted via `GET/POST /api/groups/order` endpoints
+    - Color-coded event bars matching group theme
+    - Timeline modes: Day and Week views (day view by default)
+    - Dynamic height calculation based on number of groups
+    - Syncfusion ScheduleComponent with TimelineViews, Resize, and DragAndDrop support
+    - Files: `dashboard/src/ressourcen.tsx` (page), `dashboard/src/ressourcen.css` (styles)
+
+  ### Earlier (November 2025)
+  
+  - **API Naming Convention Standardization (camelCase)**:
+    - Backend: Created `server/serializers.py` with `dict_to_camel_case()` utility for consistent JSON serialization
+    - Events API: `GET /api/events` and `GET /api/events/<id>` now return camelCase fields (`id`, `subject`, `startTime`, `endTime`, `type`, `groupId`, etc.) instead of PascalCase
+    - Frontend: Dashboard and appointments page updated to consume camelCase API responses
+    - Appointments page maintains internal PascalCase for Syncfusion scheduler compatibility with automatic mapping from API responses
+    - **Breaking**: External API consumers must update field names from PascalCase to camelCase
+  
+  - **UTC Time Handling**:
+    - Database stores all timestamps in UTC (naive timestamps normalized by backend)
+    - API returns ISO strings without 'Z' suffix: `"2025-11-27T20:03:00"`
+    - Frontend: Dashboard and appointments automatically append 'Z' to parse as UTC and display in user's local timezone
+    - Time formatting functions use `toLocaleTimeString('de-DE')` for German locale display
+    - All time comparisons use UTC; `new Date().toISOString()` sends UTC back to API
+    - API returns ISO strings without `Z`; frontend must append `Z` before parsing to ensure UTC
+
+  - **Dashboard Enhancements**:
+    - New card-based design for Raumgruppen (room groups) with Syncfusion components
+    - Global statistics summary: total infoscreens, online/offline counts, warning groups
+    - Filter buttons: All, Online, Offline, Warnings with dynamic counts
+    - Active event display per group: shows currently playing content with type icon, title, date, and time
+    - Health visualization with color-coded progress bars per group
+    - Expandable client details with last alive timestamps
+    - Bulk restart functionality for offline clients per group
+    - Manual refresh button with toast notifications
+    - 15-second auto-refresh interval
+
+  ### Earlier changes
+
+  - Scheduler: when formatting video events the scheduler now performs a best-effort HEAD probe of the streaming URL and includes basic metadata in the emitted payload (mime_type, size, accept_ranges). Placeholders for richer metadata (duration, resolution, bitrate, qualities, thumbnails, checksum) are included for later population by a background worker.
+  - Streaming endpoint: a range-capable streaming endpoint was added at `/api/eventmedia/stream/<media_id>/<filename>` that supports byte-range requests (206 Partial Content) to enable seeking from clients.
+  - Event model & API: `Event` gained video-related fields (`event_media_id`, `autoplay`, `loop`, `volume`) and the API accepts and persists these when creating/updating video events.
+  - Dashboard: UI updated to allow selecting uploaded videos for events and to specify autoplay/loop/volume. File upload settings were increased (maxFileSize raised) and the client now validates video duration (max 10 minutes) before upload.
+  - FileManager: uploads compute basic metadata and enqueue conversions for office formats as before; video uploads now surface size and are streamable via the new endpoint.
+
+  - Event model & API (new): Added `muted` (Boolean) for video events; create/update and GET endpoints accept, persist, and return `muted` alongside `autoplay`, `loop`, and `volume`.
+  - Dashboard — Settings: Settings page refactored to nested tabs; added Events → Videos defaults (autoplay, loop, volume, mute) backed by system settings keys (`video_autoplay`, `video_loop`, `video_volume`, `video_muted`).
+  - Dashboard — Events UI: CustomEventModal now exposes per-event video `muted` and initializes all video fields from system defaults when creating a new event.
+  - Dashboard — Academic Calendar: Merged “School Holidays Import” and “List” into a single “📥 Import & Liste” tab; nested tab selection is persisted with controlled `selectedItem` state to avoid jumps.
+
+  Note: these edits are intentionally backwards-compatible — if the probe fails, the scheduler still emits the stream URL and the client should fallback to a direct play attempt or request richer metadata when available.
+
+  Backend rework notes (no version bump):
+  - Dev container hygiene: UI-only Remote Containers; reproducible dashboard installs (`npm ci`); idempotent shell aliases.
+  - Serialization consistency: snake_case internal → camelCase external via `server/serializers.py` for all JSON.
+  - UTC normalization across routes/scheduler; enums and datetimes serialize consistently.
+
 ## Service boundaries & data flow
 - Database connection string is passed as `DB_CONN` (mysql+pymysql) to Python services.
   - API builds its engine in `server/database.py` (loads `.env` only in development).
-  - Scheduler loads `DB_CONN` in `scheduler/db_utils.py`. Recurring events are expanded for the next 7 days, and event exceptions (skipped dates, detached occurrences) are respected. Only recurring events with recurrence_end in the future remain active.
+  - Scheduler loads `DB_CONN` in `scheduler/db_utils.py`. Recurring events are expanded for the next 7 days, and event exceptions (skipped dates, detached occurrences) are respected. Only recurring events with recurrence_end in the future remain active. The scheduler publishes only events that are active at the current time and clears retained topics (publishes `[]`) for groups without active events. Time comparisons are UTC and naive timestamps are normalized.
   - Listener also creates its own engine for writes to `clients`.
+  - Scheduler queries a future window (default: 7 days) to expand recurring events using RFC 5545 rules, applies event exceptions (skipped dates, detached occurrences), and publishes only events that are active at the current time (UTC). When a group has no active events, the scheduler clears its retained topic by publishing an empty list. Time comparisons are UTC; naive timestamps are normalized. Logging is concise; conversion lookups are cached and logged only once per media.
 - MQTT topics (paho-mqtt v2, use Callback API v2):
   - Discovery: `infoscreen/discovery` (JSON includes `uuid`, hw/ip data). ACK to `infoscreen/{uuid}/discovery_ack`. See `listener/listener.py`.
   - Heartbeat: `infoscreen/{uuid}/heartbeat` updates `Client.last_alive` (UTC).
@@ -27,6 +129,8 @@ Use this as your shared context when proposing changes. Keep edits minimal and m
   - Per-client group assignment (retained): `infoscreen/{uuid}/group_id` via `server/mqtt_helper.py`.
 - Screenshots: server-side folders `server/received_screenshots/` and `server/screenshots/`; Nginx exposes `/screenshots/{uuid}.jpg` via `server/wsgi.py` route.
 
+- Dev Container guidance: If extensions reappear inside the container, remove UI-only extensions from `devcontainer.json` `extensions` and map them in `remote.extensionKind` as `"ui"`.
+
 - Presentation conversion (PPT/PPTX/ODP → PDF):
   - Trigger: on upload in `server/routes/eventmedia.py` for media types `ppt|pptx|odp` (compute sha256, upsert `Conversion`, enqueue job).
   - Worker: RQ worker runs `server.worker.convert_event_media_to_pdf`, calls Gotenberg LibreOffice endpoint, writes to `server/media/converted/`.
@@ -36,11 +140,27 @@ Use this as your shared context when proposing changes. Keep edits minimal and m
   - Storage: originals under `server/media/…`, outputs under `server/media/converted/` (prod compose mounts a shared volume for this path).
 
 ## Data model highlights (see `models/models.py`)
-- Enums: `EventType` (presentation, website, video, message, webuntis), `MediaType` (file/website types), and `AcademicPeriodType` (schuljahr, semester, trimester).
-- Tables: `clients`, `client_groups`, `events`, `event_media`, `users`, `academic_periods`, `school_holidays`.
+- User model: Includes 7 new audit/security fields (migration: `4f0b8a3e5c20_add_user_audit_fields.py`):
+  - `last_login_at`, `last_password_change_at`: TIMESTAMP (UTC) tracking for auth events
+  - `failed_login_attempts`, `last_failed_login_at`: Security monitoring for brute-force detection
+  - `locked_until`: TIMESTAMP placeholder for account lockout (infrastructure in place, not yet enforced)
+  - `deactivated_at`, `deactivated_by`: Soft-delete audit trail (FK self-reference); soft deactivation is the default, hard delete superadmin-only
+  - Role hierarchy (privilege escalation enforced): `user` < `editor` < `admin` < `superadmin`
 - System settings: `system_settings` key–value store via `SystemSetting` for global configuration (e.g., WebUntis/Vertretungsplan supplement-table). Managed through routes in `server/routes/system_settings.py`.
-- Academic periods: `academic_periods` table supports educational institution cycles (school years, semesters). Events and media can be optionally linked via `academic_period_id` (nullable for backward compatibility).
-- Times are stored as timezone-aware; treat comparisons in UTC (see scheduler and routes/events).
+  - Presentation defaults (system-wide):
+    - `presentation_interval` (seconds, default "10")
+    - `presentation_page_progress` ("true"/"false", default "true")
+    - `presentation_auto_progress` ("true"/"false", default "true")
+    Seeded in `server/init_defaults.py` if missing.
+  - Video defaults (system-wide):
+    - `video_autoplay` ("true"/"false", default "true")
+    - `video_loop` ("true"/"false", default "true")
+    - `video_volume` (0.0–1.0, default "0.8")
+    - `video_muted` ("true"/"false", default "false")
+    Used as initial values when creating new video events; editable per event.
+  - Events: Added `page_progress` (Boolean) and `auto_progress` (Boolean) for presentation behavior per event.
+  - Event (video fields): `event_media_id`, `autoplay`, `loop`, `volume`, `muted`.
+  - WebUntis URL: WebUntis uses the existing Vertretungsplan/Supplement-Table URL (`supplement_table_url`). There is no separate `webuntis_url` setting; use `GET/POST /api/system-settings/supplement-table`.
 
 - Conversions:
   - Enum `ConversionStatus`: `pending`, `processing`, `ready`, `failed`.
@@ -52,8 +172,8 @@ Use this as your shared context when proposing changes. Keep edits minimal and m
 - Session usage: instantiate `Session()` per request, commit when mutating, and always `session.close()` before returning.
 - Examples:
   - Clients: `server/routes/clients.py` includes bulk group updates and MQTT sync (`publish_multiple_client_groups`).
-  - Groups: `server/routes/groups.py` computes “alive” using a grace period that varies by `ENV`.
-  - Events: `server/routes/events.py` serializes enum values to strings and normalizes times to UTC. Recurring events are only deactivated after their recurrence_end (UNTIL); non-recurring events deactivate after their end time. Event exceptions are respected and rendered in scheduler output.
+  - Groups: `server/routes/groups.py` computes “alive” using a grace period that varies by `ENV`.    - `GET /api/groups/order` — retrieve saved group display order
+    - `POST /api/groups/order` — persist group display order (array of group IDs)  - Events: `server/routes/events.py` serializes enum values to strings and normalizes times to UTC. Recurring events are only deactivated after their recurrence_end (UNTIL); non-recurring events deactivate after their end time. Event exceptions are respected and rendered in scheduler output.
   - Media: `server/routes/eventmedia.py` implements a simple file manager API rooted at `server/media/`.
   - System settings: `server/routes/system_settings.py` exposes key–value CRUD (`/api/system-settings`) and a convenience endpoint for WebUntis/Vertretungsplan supplement-table: `GET/POST /api/system-settings/supplement-table` (admin+).
   - Academic periods: `server/routes/academic_periods.py` exposes:
@@ -61,12 +181,26 @@ Use this as your shared context when proposing changes. Keep edits minimal and m
     - `GET /api/academic_periods/active` — currently active period
     - `POST /api/academic_periods/active` — set active period (deactivates others)
     - `GET /api/academic_periods/for_date?date=YYYY-MM-DD` — period covering given date
+  - User management: `server/routes/users.py` exposes comprehensive CRUD for users (admin+):
+    - `GET /api/users` — list all users (role-filtered: admin sees user/editor/admin, superadmin sees all); includes audit fields in camelCase (lastLoginAt, lastPasswordChangeAt, failedLoginAttempts, deactivatedAt, deactivatedBy)
+    - `POST /api/users` — create user with username, password (min 6 chars), role, and status; admin cannot create superadmin; initializes audit fields
+    - `GET /api/users/<id>` — get detailed user record with all audit fields
+    - `PUT /api/users/<id>` — update user (cannot change own role/status; admin cannot modify superadmin accounts)
+    - `PUT /api/users/<id>/password` — admin password reset (requires backend check to reject self-reset for consistency)
+    - `DELETE /api/users/<id>` — hard delete (superadmin only, with self-deletion check)
+  - Auth routes (`server/routes/auth.py`): Enhanced to track login events (sets `last_login_at`, resets `failed_login_attempts` on success; increments `failed_login_attempts` and `last_failed_login_at` on failure). Self-service password change via `PUT /api/auth/change-password` requires current password verification.
+
+  Documentation maintenance: keep this file aligned with real patterns; update when routes/session/UTC rules change. Avoid long prose; link exact paths.
 
 ## Frontend patterns (dashboard)
 - Vite React app; proxies `/api` and `/screenshots` to API in dev (`vite.config.ts`).
 - Uses Syncfusion components; Vite config pre-bundles specific packages to avoid alias issues.
 - Environment: `VITE_API_URL` provided at build/run; in dev compose, proxy handles `/api` so local fetches can use relative `/api/...` paths.
- - Theming: Syncfusion Material 3 theme is used. All component CSS is imported centrally in `dashboard/src/main.tsx` (base, navigations, buttons, inputs, dropdowns, popups, kanban, grids, schedule, filemanager, notifications, layouts, lists, calendars, splitbuttons, icons). Tailwind CSS has been removed.
+- **API Response Format**: All API endpoints return camelCase JSON (e.g., `startTime`, `endTime`, `groupId`). Frontend consumes camelCase directly.
+- **UTC Time Parsing**: API returns ISO strings without 'Z' suffix. Frontend appends 'Z' before parsing to ensure UTC interpretation: `const utcString = dateStr.endsWith('Z') ? dateStr : dateStr + 'Z'; new Date(utcString);`. Display uses `toLocaleTimeString('de-DE')` for German format.
+
+- Dev Container: When adding frontend deps, prefer `npm ci` and, if using named volumes, recreate dashboard `node_modules` volume so installs occur inside the container.
+- Theming: Syncfusion Material 3 theme is used. All component CSS is imported centrally in `dashboard/src/main.tsx` (base, navigations, buttons, inputs, dropdowns, popups, kanban, grids, schedule, filemanager, notifications, layouts, lists, calendars, splitbuttons, icons). Tailwind CSS has been removed.
  - Scheduler (appointments page): top bar includes Group and Academic Period selectors (Syncfusion DropDownList). Selecting a period calls `POST /api/academic_periods/active`, moves the calendar to today’s month/day within the period year, and refreshes a right-aligned indicator row showing:
    - Holidays present in the current view (count)
    - Period label (display_name or name) with a badge indicating whether any holidays exist in that period (overlap check)
@@ -81,6 +215,7 @@ Use this as your shared context when proposing changes. Keep edits minimal and m
     - Detached occurrences (edited/broken out): treated as single events.
   - Single occurrence editing: Users can detach individual occurrences from recurring series. The frontend hooks `actionComplete`/`onActionCompleted` with `requestType='eventChanged'` to persist changes: it calls `POST /api/events/<id>/occurrences/<date>/detach` for single-occurrence edits and `PUT /api/events/<id>` for series or single events as appropriate. The backend creates `EventException` and a standalone `Event` without modifying the master beyond EXDATEs.
   - UI: Events with `SkipHolidays` render a TentTree icon next to the main event icon. The custom recurrence icon in the header was removed; rely on Syncfusion’s native lower-right recurrence badge.
+  - Website & WebUntis: Both event types display a website. WebUntis reads its URL from the system `supplement_table_url` and does not provide a per-event URL field.
 
 - Program info page (`dashboard/src/programminfo.tsx`):
   - Loads data from `dashboard/public/program-info.json` (app name, version, build info, tech stack, changelog).
@@ -92,15 +227,30 @@ Use this as your shared context when proposing changes. Keep edits minimal and m
   - Unified toast/dialog wording; replaced legacy alerts with toasts; spacing handled via inline styles to avoid Tailwind dependency.
 
 - Header user menu (top-right):
-  - Shows current username and role; click opens a menu with “Profil” and “Abmelden”.
+  - Shows current username and role; click opens a menu with "Passwort ändern" (lock icon), "Profil", and "Abmelden".
   - Implemented with Syncfusion DropDownButton (`@syncfusion/ej2-react-splitbuttons`).
-  - “Abmelden” navigates to `/logout`; the page invokes backend logout and redirects to `/login`.
+  - "Passwort ändern": Opens self-service password change dialog (available to all authenticated users); requires current password verification, new password min 6 chars, must match confirm field; calls `PUT /api/auth/change-password`
+  - "Abmelden" navigates to `/logout`; the page invokes backend logout and redirects to `/login`.
+
+- User management page (`dashboard/src/users.tsx`):
+  - Full CRUD interface for managing users (admin+ only in menu); accessible via "Benutzer" sidebar entry
+  - Syncfusion GridComponent: 20 per page (configurable), sortable columns (ID, username, role), custom action button template with role-based visibility
+  - Statistics cards: total users, active (non-deactivated), inactive (deactivated) counts
+  - Dialogs: Create (username/password/role/status), Edit (with self-edit protections), Password Reset (admin only, no current password required), Delete (superadmin only, self-check), Details (read-only audit info with formatted timestamps)
+  - Role badges: Color-coded display (user: gray, editor: blue, admin: green, superadmin: red)
+  - Audit information displayed: last login, password change, last failed login, deactivation timestamps and deactivating user
+  - Role-based permissions (enforced backend + frontend):
+    - Admin: can manage user/editor/admin roles (not superadmin); soft-deactivate only; cannot see/edit superadmin accounts
+    - Superadmin: can manage all roles including other superadmins; can permanently hard-delete users
+  - Security rules enforced: cannot change own role, cannot deactivate own account, cannot delete self, cannot reset own password via admin route (must use self-service)
+  - API client in `dashboard/src/apiUsers.ts` for all user operations (listUsers, getUser, createUser, updateUser, resetUserPassword, deleteUser)
+  - Menu visibility: "Benutzer" menu item only visible to admin+ (role-gated in App.tsx)
 
 - Settings page (`dashboard/src/settings.tsx`):
   - Structure: Syncfusion TabComponent with role-gated tabs
     - 📅 Academic Calendar (all users)
-      - School Holidays: CSV/TXT import and list
-      - Academic Periods: select and set active period (uses `/api/academic_periods` routes)
+      - 📥 Import & Liste: CSV/TXT import and list combined
+      - 🗂️ Perioden: select and set active period (uses `/api/academic_periods` routes)
     - 🖥️ Display & Clients (admin+)
       - Default Settings: placeholders for heartbeat, screenshots, defaults
       - Client Configuration: quick links to Clients and Groups pages
@@ -109,11 +259,39 @@ Use this as your shared context when proposing changes. Keep edits minimal and m
       - Conversion Status: placeholder for conversions overview
     - 🗓️ Events (admin+)
       - WebUntis / Vertretungsplan: system-wide supplement table URL with enable/disable, save, and preview; persists via `/api/system-settings/supplement-table`
-      - Other event types (presentation, website, video, message, other): placeholders for defaults
+      - Presentations: general defaults for slideshow interval, page-progress, and auto-progress; persisted via `/api/system-settings` keys (`presentation_interval`, `presentation_page_progress`, `presentation_auto_progress`). These defaults are applied when creating new presentation events (the custom event modal reads them and falls back to per-event values when editing).
+      - Videos: system-wide defaults for `autoplay`, `loop`, `volume`, and `muted`; persisted via `/api/system-settings` keys (`video_autoplay`, `video_loop`, `video_volume`, `video_muted`). These defaults are applied when creating new video events (the custom event modal reads them and falls back to per-event values when editing).
+      - Other event types (website, message, other): placeholders for defaults
     - ⚙️ System (superadmin)
       - Organization Info and Advanced Configuration placeholders
   - Role gating: Admin/Superadmin tabs are hidden if the user lacks permission; System is superadmin-only
   - API clients use relative `/api/...` URLs so Vite dev proxy handles requests without CORS issues. The settings UI calls are centralized in `dashboard/src/apiSystemSettings.ts`.
+  - Nested tabs: implemented as controlled components using `selectedItem` with stateful handlers to prevent sub-tab resets during updates.
+
+- Dashboard page (`dashboard/src/dashboard.tsx`):
+  - Card-based overview of all Raumgruppen (room groups) with real-time status monitoring
+  - Global statistics: total infoscreens, online/offline counts, warning groups
+  - Filter buttons: All / Online / Offline / Warnings with dynamic counts
+  - Per-group cards show:
+    - Currently active event (title, type, date/time in local timezone)
+    - Health bar with online/offline ratio and color-coded status
+    - Expandable client list with last alive timestamps
+    - Bulk restart button for offline clients
+  - Uses Syncfusion ButtonComponent, ToastComponent, and card CSS classes
+  - Auto-refresh every 15 seconds; manual refresh button available
+  - "Nicht zugeordnet" group always appears last in sorted list
+
+- Ressourcen page (`dashboard/src/ressourcen.tsx`):
+  - Timeline view showing all groups and their active events in parallel
+  - Uses Syncfusion ScheduleComponent with TimelineViews (day/week modes)
+  - Compact row display: 65px height per group, dynamically calculated total height
+  - Group ordering panel with drag up/down controls; order persisted to backend via `/api/groups/order`
+  - Filters out "Nicht zugeordnet" group from timeline display
+  - Fetches events per group for current date range; displays first active event per group
+  - Color-coded event bars using `getGroupColor()` from `groupColors.ts`
+  - Resource-based timeline: each group is a resource row, events mapped to `ResourceId`
+  - Real-time updates: loads events on mount and when view/date changes
+  - Custom CSS in `dashboard/src/ressourcen.css` for timeline styling and controls
 
 - User dropdown technical notes:
   - Dependencies: `@syncfusion/ej2-react-splitbuttons` and `@syncfusion/ej2-splitbuttons` must be installed.
@@ -147,19 +325,35 @@ Note: Syncfusion usage in the dashboard is already documented above; if a UI for
 - REFRESH_SECONDS — Optional scheduler republish interval; `0` disables periodic refresh.
 
 ## Conventions & gotchas
+- **Datetime Handling**:
   - Always compare datetimes in UTC; some DB values may be naive—normalize before comparing (see `routes/events.py`).
-  - Scheduler queries a future window (default: 7 days) and expands recurring events using RFC 5545 rules. Event exceptions are respected. Logging is concise and conversion lookups are cached.
+  - Database stores timestamps in UTC (naive datetimes are normalized to UTC by backend)
+  - API returns ISO strings **without** 'Z' suffix: `"2025-11-27T20:03:00"`
+  - Frontend **must** append 'Z' before parsing: `const utcStr = dateStr.endsWith('Z') ? dateStr : dateStr + 'Z'; new Date(utcStr);`
+  - Display in local timezone using `toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })`
+  - When sending to API, use `date.toISOString()` which includes 'Z' and is UTC
+  - Frontend must append `Z` to API strings before parsing; backend compares in UTC and returns ISO without `Z`.
+- **JSON Naming Convention**:
+  - Backend uses snake_case internally (Python convention)
+  - API returns camelCase JSON (web standard): `startTime`, `endTime`, `groupId`, etc.
+  - Use `dict_to_camel_case()` from `server/serializers.py` before `jsonify()`
+  - Frontend consumes camelCase directly; Syncfusion scheduler maintains internal PascalCase with field mappings
+- Scheduler enforces UTC comparisons and normalizes naive timestamps. It publishes only currently active events and clears retained topics for groups with no active events. It also queries a future window (default: 7 days) and expands recurring events using RFC 5545 rules. Event exceptions are respected. Logging is concise and conversion lookups are cached.
 - Use retained MQTT messages for state that clients must recover after reconnect (events per group, client group_id).
+  - Clients should parse `event_type` and then read the corresponding nested payload (`presentation`, `website`, `video`, etc.). `website` and `webuntis` use the same nested `website` payload with `type: browser` and a `url`. Video events include `autoplay`, `loop`, `volume`, and `muted`.
 - In-container DB host is `db`; do not use `localhost` inside services.
 - No separate dev vs prod secret conventions: use the same env var keys across environments (e.g., `DB_CONN`, `MQTT_USER`, `MQTT_PASSWORD`).
 - When adding a new route:
   1) Create a Blueprint in `server/routes/...`,
   2) Register it in `server/wsgi.py`,
-  3) Manage `Session()` lifecycle, and
-  4) Return JSON-safe values (serialize enums and datetimes).
+  3) Manage `Session()` lifecycle,
+  4) Return JSON-safe values (serialize enums and datetimes), and
+  5) Use `dict_to_camel_case()` for camelCase JSON responses
+
+Docs maintenance guardrails (solo-friendly): Update this file alongside code changes (services/MQTT/API/UTC/env). Keep it concise (20–50 lines per section). Never include secrets.
 - When extending media types, update `MediaType` and any logic in `eventmedia` and dashboard that depends on it.
 - Academic periods: Events/media can be optionally associated with periods for educational organization. Only one period should be active at a time (`is_active=True`).
- - Initialization scripts: legacy DB init scripts were removed; use Alembic and `initialize_database.py` going forward.
+- Initialization scripts: legacy DB init scripts were removed; use Alembic and `initialize_database.py` going forward.
 
 ### Recurrence & holidays: conventions
 - Do not pre-expand recurrences on the backend. Always send master events with `RecurrenceRule` + `RecurrenceException`.
@@ -172,6 +366,15 @@ Note: Syncfusion usage in the dashboard is already documented above; if a UI for
 - Bulk group assignment emits retained messages for each client: `PUT /api/clients/group`.
 - Listener heartbeat path: `infoscreen/<uuid>/heartbeat` → sets `clients.last_alive`.
 
+## Scheduler payloads: presentation extras
+- Presentation event payloads now include `page_progress` and `auto_progress` in addition to `slide_interval` and media files. These are sourced from per-event fields in the database (with system defaults applied on event creation).
+ 
+## Scheduler payloads: website & webuntis
+- For both `website` and `webuntis`, the scheduler emits a nested `website` object:
+  - `{ "type": "browser", "url": "https://..." }`
+- The `event_type` remains `website` or `webuntis`. Clients should treat both identically for rendering.
+- The WebUntis URL is set at event creation by reading the system `supplement_table_url`.
+
 Questions or unclear areas? Tell us if you need: exact devcontainer debugging steps, stricter Alembic workflow, or a seed dataset beyond `init_defaults.py`.
 
 ## Academic Periods System

.gitignore

@@ -1,75 +1,7 @@
 # OS/Editor
 .DS_Store
 Thumbs.db
-.vscode/
-.idea/
-
-# Python
-__pycache__/
-*.pyc
-.pytest_cache/
-
-# Node
-node_modules/
-dashboard/node_modules/
-dashboard/.vite/
-
-# Env files (never commit secrets)
-.env
-.env.local
-
-# Docker
-*.log
-# Python-related
-__pycache__/
-*.py[cod]
-*.pyo
-*.pyd
-*.pdb
-*.egg-info/
-*.eggs/
-*.env
-.env
-
-# Byte-compiled / optimized / DLL files
-*.pyc
-*.pyo
-*.pyd
-
-# Virtual environments
-venv/
-env/
-.venv/
-.env/
-
-# Logs and databases
-*.log
-*.sqlite3
-*.db
-
-# Docker-related
-*.pid
-*.tar
-docker-compose.override.yml
-docker-compose.override.*.yml
-docker-compose.override.*.yaml
-
-# Node.js-related
-node_modules/
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Dash and Flask cache
-*.cache
-*.pytest_cache/
-instance/
-*.mypy_cache/
-*.hypothesis/
-*.coverage
-.coverage.*
-
-# IDE and editor files
+desktop.ini
 .vscode/
 .idea/
 *.swp
@@ -77,24 +9,69 @@ instance/
 *.bak
 *.tmp
 
-# OS-generated files
-.DS_Store
-Thumbs.db
-desktop.ini
+# Python
+__pycache__/
+*.py[cod]
+*.pyc
+*.pyo
+*.pyd
+*.pdb
+*.egg-info/
+*.eggs/
+.pytest_cache/
+*.mypy_cache/
+*.hypothesis/
+*.coverage
+.coverage.*
+*.cache
+instance/
 
-# Devcontainer-related
+# Virtual environments
+venv/
+env/
+.venv/
+.env/
+
+# Environment files
+.env
+.env.local
+
+# Logs and databases
+*.log
+*.log.1
+*.sqlite3
+*.db
+
+# Node.js
+node_modules/
+dashboard/node_modules/
+dashboard/.vite/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-store/
+
+# Docker
+*.pid
+*.tar
+docker-compose.override.yml
+docker-compose.override.*.yml
+docker-compose.override.*.yaml
+
+# Devcontainer
 .devcontainer/
 
+# Project-specific
 received_screenshots/
-mosquitto/
-alte/
 screenshots/
 media/
+mosquitto/
+certs/
+alte/
+sync.ffs_db
 dashboard/manitine_test.py
 dashboard/pages/test.py
-.gitignore
 dashboard/sidebar_test.py
 dashboard/assets/responsive-sidebar.css
-certs/
-sync.ffs_db
-.pnpm-store/
+dashboard/src/nested_tabs.js
+scheduler/scheduler.log.2

DATABASE_GUIDE.md

@@ -6,7 +6,7 @@ Your database has been successfully initialized! Here's what you need to know:
 
 ### ✅ Current Status
 - **Database**: MariaDB 11.2 running in Docker container `infoscreen-db`
-- **Schema**: Up to date (Alembic revision: `b5a6c3d4e7f8`)
+- **Schema**: Up to date (check with `alembic current` in `server/`)
 - **Default Data**: Admin user and client group created
 - **Academic Periods**: Austrian school years 2024/25 (active), 2025/26, 2026/27
 
@@ -82,8 +82,70 @@ session.close()
 - **`conversions`** - File conversion jobs (PPT → PDF)
 - **`academic_periods`** - School year/semester management
 - **`school_holidays`** - Holiday calendar
+- **`event_exceptions`** - Overrides and skips for recurring events (per occurrence)
+- **`system_settings`** - Key–value store for global settings
 - **`alembic_version`** - Migration tracking
 
+### Key details and relationships
+
+- Users (`users`)
+  - Fields: `username` (unique), `password_hash`, `role` (enum: user|editor|admin|superadmin), `is_active`
+
+- Client groups (`client_groups`)
+  - Fields: `name` (unique), `description`, `is_active`
+
+- Clients (`clients`)
+  - Fields: `uuid` (PK), network/device metadata, `group_id` (FK→client_groups, default 1), `last_alive` (updated on heartbeat), `is_active`
+
+- Academic periods (`academic_periods`)
+  - Fields: `name` (unique), optional `display_name`, `start_date`, `end_date`, `period_type` (enum: schuljahr|semester|trimester), `is_active` (at most one should be active)
+  - Indexes: `is_active`, dates
+
+- Event media (`event_media`)
+  - Fields: `media_type` (enum, see below), `url`, optional `file_path`, optional `message_content`, optional `academic_period_id`
+  - Used by events of types: presentation, video, website, message, other
+
+- Events (`events`)
+  - Core: `group_id` (FK), optional `academic_period_id` (FK), `title`, optional `description`, `start`, `end`, `event_type` (enum), optional `event_media_id` (FK)
+  - Presentation/video extras: `autoplay`, `loop`, `volume`, `slideshow_interval`, `page_progress`, `auto_progress`
+  - Recurrence: `recurrence_rule` (RFC 5545 RRULE), `recurrence_end`, `skip_holidays` (bool)
+  - Audit/state: `created_by` (FK→users), `updated_by` (FK→users), `is_active`
+  - Indexes: `start`, `end`, `recurrence_rule`, `recurrence_end`
+  - Relationships: `event_media`, `academic_period`, `exceptions` (one-to-many to `event_exceptions` with cascade delete)
+
+- Event exceptions (`event_exceptions`)
+  - Purpose: track per-occurrence skips or overrides for a recurring master event
+  - Fields: `event_id` (FK→events, ondelete CASCADE), `exception_date` (Date), `is_skipped`, optional overrides (`title`, `description`, `start`, `end`)
+
+- School holidays (`school_holidays`)
+  - Unique: (`name`, `start_date`, `end_date`, `region`)
+  - Used in combination with `events.skip_holidays`
+
+- Conversions (`conversions`)
+  - Purpose: track PPT/PPTX/ODP → PDF processing
+  - Fields: `source_event_media_id` (FK→event_media, ondelete CASCADE), `target_format`, `target_path`, `status` (enum), `file_hash`, timestamps, `error_message`
+  - Indexes: (`source_event_media_id`, `target_format`), (`status`, `target_format`)
+  - Unique: (`source_event_media_id`, `target_format`, `file_hash`) — idempotency per content
+
+- System settings (`system_settings`)
+  - Key–value store: `key` (PK), `value`, optional `description`, `updated_at`
+  - Notable keys used by the app: `presentation_interval`, `presentation_page_progress`, `presentation_auto_progress`
+
+### Enums (reference)
+
+- UserRole: `user`, `editor`, `admin`, `superadmin`
+- AcademicPeriodType: `schuljahr`, `semester`, `trimester`
+- EventType: `presentation`, `website`, `video`, `message`, `other`, `webuntis`
+- MediaType: `pdf`, `ppt`, `pptx`, `odp`, `mp4`, `avi`, `mkv`, `mov`, `wmv`, `flv`, `webm`, `mpg`, `mpeg`, `ogv`, `jpg`, `jpeg`, `png`, `gif`, `bmp`, `tiff`, `svg`, `html`, `website`
+- ConversionStatus: `pending`, `processing`, `ready`, `failed`
+
+### Timezones, recurrence, and holidays
+
+- All timestamps are stored/compared as timezone-aware UTC. Any naive datetimes are normalized to UTC before comparisons.
+- Recurrence is represented on events via `recurrence_rule` (RFC 5545 RRULE) and `recurrence_end`. Do not pre-expand series in the DB.
+- Per-occurrence exclusions/overrides are stored in `event_exceptions`. The API also emits EXDATE tokens matching occurrence start times (UTC) so the frontend can exclude instances natively.
+- When `skip_holidays` is true, occurrences that fall on school holidays are excluded via corresponding `event_exceptions`.
+
 ### Environment Variables:
 ```bash
 DB_CONN=mysql+pymysql://infoscreen_admin:KqtpM7wmNdM1DamFKs@db/infoscreen_by_taa

DEV-CHANGELOG.md

@@ -0,0 +1,21 @@
+# DEV-CHANGELOG
+
+This changelog tracks all changes made in the development workspace, including internal, experimental, and in-progress updates. Entries here may not be reflected in public releases or the user-facing changelog.
+
+---
+
+## Unreleased (development workspace)
+- Frontend (Settings → Events): Added Presentations defaults (slideshow interval, page-progress, auto-progress) with load/save via `/api/system-settings`; UI uses Syncfusion controls.
+- Backend defaults: Seeded `presentation_interval` ("10"), `presentation_page_progress` ("true"), `presentation_auto_progress` ("true") in `server/init_defaults.py` when missing.
+- Data model: Added per-event fields `page_progress` and `auto_progress` on `Event`; Alembic migration applied successfully.
+- Event modal (dashboard): Extended to show and persist presentation `pageProgress`/`autoProgress`; applies system defaults on create and preserves per-event values on edit; payload includes `page_progress`, `auto_progress`, and `slideshow_interval`.
+- Scheduler behavior: Now publishes only currently active events per group (at "now"); clears retained topics by publishing `[]` for groups with no active events; normalizes naive timestamps and compares times in UTC; presentation payloads include `page_progress` and `auto_progress`.
+- Recurrence handling: Still queries a 7‑day window to expand recurring events and apply exceptions; recurring events only deactivate after `recurrence_end` (UNTIL).
+- Logging: Temporarily added filter diagnostics during debugging; removed verbose logs after verification.
+- WebUntis event type: Implemented new `webuntis` type. Event creation resolves URL from system `supplement_table_url`; returns 400 if not configured. WebUntis behaves like Website on clients (shared website payload).
+- Settings consolidation: Removed separate `webuntis_url` (if present during dev); WebUntis and Vertretungsplan share `supplement_table_url`. Removed `/api/system-settings/webuntis-url` endpoints; use `/api/system-settings/supplement-table`.
+- Scheduler payloads: Added top-level `event_type` for all events; introduced unified nested `website` payload for both `website` and `webuntis` events: `{ "type": "browser", "url": "…" }`.
+- Frontend: Program info bumped to `2025.1.0-alpha.13`; changelog includes WebUntis/Website unification and settings update. Event modal shows no per-event URL for WebUntis.
+- Documentation: Added `MQTT_EVENT_PAYLOAD_GUIDE.md` and `WEBUNTIS_EVENT_IMPLEMENTATION.md`. Updated `.github/copilot-instructions.md` and `README.md` for unified Website/WebUntis handling and system settings usage.
+
+Note: These changes are available in the development environment and may be included in future releases. For released changes, see TECH-CHANGELOG.md.

MQTT_EVENT_PAYLOAD_GUIDE.md

@@ -0,0 +1,308 @@
+# MQTT Event Payload Guide
+
+## Overview
+
+This document describes the MQTT message structure used by the Infoscreen system to deliver event information from the scheduler to display clients. It covers best practices, payload formats, and versioning strategies.
+
+## MQTT Topics
+
+### Event Distribution
+- **Topic**: `infoscreen/events/{group_id}`
+- **Retained**: Yes
+- **Format**: JSON array of event objects
+- **Purpose**: Delivers active events to client groups
+
+### Per-Client Configuration
+- **Topic**: `infoscreen/{uuid}/group_id`
+- **Retained**: Yes
+- **Format**: Integer (group ID)
+- **Purpose**: Assigns clients to groups
+
+## Message Structure
+
+### General Principles
+
+1. **Type Safety**: Always include `event_type` to allow clients to parse appropriately
+2. **Backward Compatibility**: Add new fields without removing old ones
+3. **Extensibility**: Use nested objects for event-type-specific data
+4. **UTC Timestamps**: All times in ISO 8601 format with timezone info
+
+### Base Event Structure
+
+Every event includes these common fields:
+
+```json
+{
+  "id": 123,
+  "title": "Event Title",
+  "start": "2025-10-19T09:00:00+00:00",
+  "end": "2025-10-19T09:30:00+00:00",
+  "group_id": 1,
+  "event_type": "presentation|website|webuntis|video|message|other",
+  "recurrence_rule": "FREQ=WEEKLY;BYDAY=MO,WE,FR" or null,
+  "recurrence_end": "2025-12-31T23:59:59+00:00" or null
+}
+```
+
+### Event Type-Specific Payloads
+
+#### Presentation Events
+
+```json
+{
+  "id": 123,
+  "event_type": "presentation",
+  "title": "Morning Announcements",
+  "start": "2025-10-19T09:00:00+00:00",
+  "end": "2025-10-19T09:30:00+00:00",
+  "group_id": 1,
+  "presentation": {
+    "type": "slideshow",
+    "files": [
+      {
+        "name": "slides.pdf",
+        "url": "http://server:8000/api/files/converted/abc123.pdf",
+        "checksum": null,
+        "size": null
+      }
+    ],
+    "slide_interval": 10000,
+    "auto_advance": true,
+    "page_progress": true,
+    "auto_progress": true
+  }
+}
+```
+
+**Fields**:
+- `type`: Always "slideshow" for presentations
+- `files`: Array of file objects with download URLs
+- `slide_interval`: Milliseconds between slides (default: 5000)
+- `auto_advance`: Whether to automatically advance slides
+- `page_progress`: Show page number indicator
+- `auto_progress`: Enable automatic progression
+
+#### Website Events
+
+```json
+{
+  "id": 124,
+  "event_type": "website",
+  "title": "School Website",
+  "start": "2025-10-19T09:00:00+00:00",
+  "end": "2025-10-19T09:30:00+00:00",
+  "group_id": 1,
+  "website": {
+    "type": "browser",
+    "url": "https://example.com/page"
+  }
+}
+```
+
+**Fields**:
+- `type`: Always "browser" for website display
+- `url`: Full URL to display in embedded browser
+
+#### WebUntis Events
+
+```json
+{
+  "id": 125,
+  "event_type": "webuntis",
+  "title": "Schedule Display",
+  "start": "2025-10-19T09:00:00+00:00",
+  "end": "2025-10-19T09:30:00+00:00",
+  "group_id": 1,
+  "website": {
+    "type": "browser",
+    "url": "https://webuntis.example.com/schedule"
+  }
+}
+```
+
+**Note**: WebUntis events use the same payload structure as website events. The URL is fetched from system settings (`webuntis_url`) rather than being specified per-event. Clients treat `webuntis` and `website` event types identically—both display a website.
+
+#### Video Events
+
+```json
+{
+  "id": 126,
+  "event_type": "video",
+  "title": "Video Playback",
+  "start": "2025-10-19T09:00:00+00:00",
+  "end": "2025-10-19T09:30:00+00:00",
+  "group_id": 1,
+  "video": {
+    "type": "media",
+    "url": "http://server:8000/api/eventmedia/stream/123/video.mp4",
+    "autoplay": true,
+    "loop": false,
+    "volume": 0.8
+  }
+}
+```
+
+**Fields**:
+- `type`: Always "media" for video playback
+- `url`: Video streaming URL with range request support
+- `autoplay`: Whether to start playing automatically (default: true)
+- `loop`: Whether to loop the video (default: false)
+- `volume`: Playback volume from 0.0 to 1.0 (default: 0.8)
+
+#### Message Events (Future)
+
+```json
+{
+  "id": 127,
+  "event_type": "message",
+  "title": "Important Announcement",
+  "start": "2025-10-19T09:00:00+00:00",
+  "end": "2025-10-19T09:30:00+00:00",
+  "group_id": 1,
+  "message": {
+    "type": "html",
+    "content": "<h1>Important</h1><p>Message content</p>",
+    "style": "default"
+  }
+}
+```
+
+## Best Practices
+
+### 1. Type-Based Parsing
+
+Clients should:
+1. Read the `event_type` field first
+2. Switch/dispatch based on type
+3. Parse type-specific nested objects (`presentation`, `website`, etc.)
+
+```javascript
+// Example client parsing
+function parseEvent(event) {
+  switch (event.event_type) {
+    case 'presentation':
+      return handlePresentation(event.presentation);
+    case 'website':
+    case 'webuntis':
+      return handleWebsite(event.website);
+    case 'video':
+      return handleVideo(event.video);
+    // ...
+  }
+}
+```
+
+### 2. Graceful Degradation
+
+- Always provide fallback values for optional fields
+- Validate URLs before attempting to load
+- Handle missing or malformed data gracefully
+
+### 3. Performance Optimization
+
+- Cache downloaded presentation files
+- Use checksums to avoid re-downloading unchanged content
+- Preload resources before event start time
+
+### 4. Time Handling
+
+- Always parse ISO 8601 timestamps with timezone awareness
+- Compare event start/end times in UTC
+- Account for clock drift on embedded devices
+
+### 5. Error Recovery
+
+- Retry failed downloads with exponential backoff
+- Log errors but continue operation
+- Display fallback content if event data is invalid
+
+## Message Flow
+
+1. **Scheduler** queries active events from database
+2. **Scheduler** formats events with type-specific payloads
+3. **Scheduler** publishes JSON array to `infoscreen/events/{group_id}` (retained)
+4. **Client** receives retained message on connect
+5. **Client** parses events and schedules display
+6. **Client** downloads resources (presentations, etc.)
+7. **Client** displays events at scheduled times
+
+## Versioning Strategy
+
+### Adding New Event Types
+
+1. Add enum value to `EventType` in `models/models.py`
+2. Update scheduler's `format_event_with_media()` in `scheduler/db_utils.py`
+3. Update events API in `server/routes/events.py`
+4. Add icon mapping in `get_icon_for_type()`
+5. Document payload structure in this guide
+
+### Adding Fields to Existing Types
+
+- **Safe**: Add new optional fields to nested objects
+- **Unsafe**: Remove or rename existing fields
+- **Migration**: Provide both old and new field names during transition
+
+### Example: Adding a New Field
+
+```json
+{
+  "event_type": "presentation",
+  "presentation": {
+    "type": "slideshow",
+    "files": [...],
+    "slide_interval": 10000,
+    "transition_effect": "fade"  // NEW FIELD (optional)
+  }
+}
+```
+
+Old clients ignore unknown fields; new clients use enhanced features.
+
+## Common Pitfalls
+
+1. **Hardcoding Event Types**: Use `event_type` field, not assumptions
+2. **Timezone Confusion**: Always use UTC internally
+3. **Missing Error Handling**: Network failures, malformed URLs, etc.
+4. **Resource Leaks**: Clean up downloaded files periodically
+5. **Not Handling Recurrence**: Events may repeat; check `recurrence_rule`
+
+## System Settings Integration
+
+Some event types rely on system-wide settings rather than per-event configuration:
+
+### WebUntis / Supplement Table URL
+- **Setting Key**: `supplement_table_url`
+- **API Endpoint**: `GET/POST /api/system-settings/supplement-table`
+- **Usage**: Automatically applied when creating `webuntis` events
+- **Default**: Empty string (must be configured by admin)
+- **Description**: This URL is shared for both Vertretungsplan (supplement table) and WebUntis displays
+
+### Presentation Defaults
+- `presentation_interval`: Default slide interval (seconds)
+- `presentation_page_progress`: Show page indicators by default
+- `presentation_auto_progress`: Auto-advance by default
+
+These are applied when creating new events but can be overridden per-event.
+
+## Testing Recommendations
+
+1. **Unit Tests**: Validate payload serialization/deserialization
+2. **Integration Tests**: Full scheduler → MQTT → client flow
+3. **Edge Cases**: Empty event lists, missing URLs, malformed data
+4. **Performance Tests**: Large file downloads, many events
+5. **Time Tests**: Events across midnight, timezone boundaries, DST
+
+## Related Documentation
+
+- `AUTH_SYSTEM.md` - Authentication and authorization
+- `DATABASE_GUIDE.md` - Database schema and models
+- `.github/copilot-instructions.md` - System architecture overview
+- `scheduler/scheduler.py` - Event publishing implementation
+- `scheduler/db_utils.py` - Event formatting logic
+
+## Changelog
+
+- **2025-10-19**: Initial documentation
+  - Documented base event structure
+  - Added presentation and website/webuntis payload formats
+  - Established best practices and versioning strategy

README.md

@@ -39,14 +39,18 @@ A comprehensive multi-service digital signage solution for educational instituti
 
 Data flow summary:
 - Listener: consumes discovery and heartbeat messages from the MQTT Broker and updates the API Server (client registration/heartbeats).
-- Scheduler: reads events from the API Server and publishes active content to the MQTT Broker (retained topics per group) for clients.
+- Scheduler: reads events from the API Server and publishes only currently active content to the MQTT Broker (retained topics per group). When a group has no active events, the scheduler clears its retained topic by publishing an empty list. All time comparisons are done in UTC; any naive timestamps are normalized.
 - Clients: send discovery/heartbeat via the MQTT Broker (handled by the Listener) and receive content from the Scheduler via MQTT.
 - Worker: receives conversion commands directly from the API Server and reports results/status back to the API (no MQTT involved).
 - MariaDB: is accessed exclusively by the API Server. The Dashboard never talks to the database directly; it only communicates with the API.
 
 ## 🌟 Key Features
 
-
+- **User Management**: Comprehensive role-based access control (user → editor → admin → superadmin)
+  - Admin panel for user CRUD operations with audit tracking
+  - Self-service password change available to all users
+  - Audit trail: login times, password changes, deactivation history
+  - Soft-delete by default, hard-delete superadmin-only
 - Modern React-based web interface with Syncfusion components
 - Real-time client monitoring and group management
 - Event scheduling with academic period support
@@ -63,10 +67,11 @@ Data flow summary:
 ### 🎯 **Event System**
 - **Presentations**: PowerPoint/LibreOffice → PDF conversion via Gotenberg
 - **Websites**: URL-based content display
-- **Videos**: Media file streaming
+ - **Videos**: Media file streaming with per-event playback settings (`autoplay`, `loop`, `volume`, `muted`); system-wide defaults configurable under Settings → Events → Videos
 - **Messages**: Text announcements
 - **WebUntis**: Educational schedule integration
- - **Recurrence & Holidays**: Recurring events can be configured to skip holidays. The backend generates EXDATEs (RecurrenceException) for holiday occurrences using RFC 5545 timestamps (yyyyMMddTHHmmssZ), so the calendar never shows those instances. The scheduler expands recurring events for the next 7 days, applies event exceptions, and only deactivates recurring events after their recurrence_end (UNTIL). The "Termine an Ferientagen erlauben" toggle does not affect these events.
+   - Uses the system-wide Vertretungsplan/Supplement-Table URL (`supplement_table_url`) configured under Settings → Events. No separate per-event URL is required; WebUntis events display the same as Website events.
+ - **Recurrence & Holidays**: Recurring events can be configured to skip holidays. The backend generates EXDATEs (RecurrenceException) for holiday occurrences using RFC 5545 timestamps (yyyyMMddTHHmmssZ), so the calendar never shows those instances. The scheduler queries a 7-day window to expand recurring events and applies event exceptions, but only publishes events that are active at the current time (UTC). The "Termine an Ferientagen erlauben" toggle does not affect these events.
 - **Single Occurrence Editing**: Users can edit individual occurrences of recurring events without affecting the master series. The system provides a confirmation dialog to choose between editing a single occurrence or the entire series.
 
 ### 🏫 **Academic Period Management**
@@ -114,6 +119,17 @@ Data flow summary:
    # or: docker compose up -d --build
    ```
 
+Before running the dashboard dev server you may need to install Syncfusion packages used by the UI. Example (install only the packages you use):
+
+```bash
+# from the repository root
+cd dashboard
+npm install --save @syncfusion/ej2-react-splitbuttons @syncfusion/ej2-splitbuttons \
+   @syncfusion/ej2-react-grids @syncfusion/ej2-react-schedule @syncfusion/ej2-react-filemanager
+```
+
+License note: Syncfusion distributes components under a commercial license with a free community license for qualifying users. Verify licensing for your organization before using Syncfusion in production and document any license keys or compliance steps in this repository.
+
 4. **Initialize the database (first run only)**
    ```bash
    # One-shot: runs all Alembic migrations, creates default admin/group, and seeds academic periods
@@ -171,11 +187,13 @@ For detailed deployment instructions, see:
 **Technology**: Python + SQLAlchemy
 **Purpose**: Event publishing, group-based content distribution
 **Features**:
-   - Queries a future window (default: 7 days) to expand and publish recurring events
+   - Queries a future window (default: 7 days) to expand recurring events
    - Expands recurrences using RFC 5545 rules
    - Applies event exceptions (skipped dates, detached occurrences)
    - Only deactivates recurring events after their recurrence_end (UNTIL)
-   - Publishes all valid occurrences to MQTT
+   - Publishes only currently active events to MQTT (per group)
+   - Clears retained topics by publishing an empty list when a group has no active events
+   - Normalizes naive timestamps and compares times in UTC
    - Logging is concise; conversion lookups are cached and logged only once per media
 
 ### 🔄 **Worker** (Conversion Service)
@@ -194,8 +212,43 @@ For detailed deployment instructions, see:
   - `infoscreen/discovery` - Client registration
   - `infoscreen/{uuid}/heartbeat` - Client alive status
   - `infoscreen/events/{group_id}` - Event distribution
+## 🔗 Scheduler Event Payloads
+
+- Presentations include a `presentation` object with `files`, `slide_interval`, `page_progress`, and `auto_progress`.
+- Website and WebUntis events share a unified payload:
+   - `website`: `{ "type": "browser", "url": "https://..." }`
+- The `event_type` field remains specific (e.g., `presentation`, `website`, `webuntis`) so clients can dispatch appropriately; however, `website` and `webuntis` should be handled identically in clients.
+ - Videos include a `video` payload with a stream URL and playback flags:
+   - `video`: includes `url` (streaming endpoint) and `autoplay`, `loop`, `volume`, `muted`
+   - Streaming endpoint supports byte-range requests (206) to enable seeking: `/api/eventmedia/stream/<media_id>/<filename>`
+   - Server-side UTC: All backend comparisons are performed in UTC; API returns ISO strings without `Z`. Frontend appends `Z` before parsing.
+  
+## Recent changes since last commit
+
+- Video / Streaming support: Added end-to-end support for video events. The API and dashboard now allow creating `video` events referencing uploaded media. The server exposes a range-capable streaming endpoint at `/api/eventmedia/stream/<media_id>/<filename>` so clients can seek during playback.
+- Scheduler metadata: Scheduler now performs a best-effort HEAD probe for video stream URLs and includes basic metadata in the retained MQTT payload: `mime_type`, `size` (bytes) and `accept_ranges` (bool). Placeholders for richer metadata (`duration`, `resolution`, `bitrate`, `qualities`, `thumbnails`, `checksum`) are emitted as null/empty until a background worker fills them.
+- Dashboard & uploads: The dashboard's FileManager upload limits were increased (to support Full-HD uploads) and client-side validation enforces a maximum video length (10 minutes). The event modal exposes playback flags (`autoplay`, `loop`, `volume`, `muted`) and initializes them from system defaults for new events.
+- DB model & API: `Event` includes `muted` in addition to `autoplay`, `loop`, and `volume`; endpoints accept, persist, and return these fields for video events. Events reference uploaded media via `event_media_id`.
+- Settings UI: Settings page refactored to nested tabs; added Events → Videos defaults (autoplay, loop, volume, mute) backed by system settings keys (`video_autoplay`, `video_loop`, `video_volume`, `video_muted`).
+- Academic Calendar UI: Merged “School Holidays Import” and “List” into a single “📥 Import & Liste” tab; nested tab selection is persisted with controlled `selectedItem` state to avoid jumps.
+
+These changes are designed to be safe if metadata extraction or probes fail — clients should still attempt playback using the provided `url` and fall back to requesting/resolving richer metadata when available.
+
+See `MQTT_EVENT_PAYLOAD_GUIDE.md` for details.
   - `infoscreen/{uuid}/group_id` - Client group assignment
 
+## 🧩 Developer Environment Notes (Dev Container)
+- Extensions: UI-only `Dev Containers` runs on the host UI; not installed inside the container to avoid reinstallation loops. See `/.devcontainer/devcontainer.json` (`remote.extensionKind`).
+- Installs: Dashboard uses `npm ci` on `postCreateCommand` for reproducible installs.
+- Aliases: `postStartCommand` appends shell aliases idempotently to prevent duplicates across restarts.
+
+## 📦 Versioning
+- Unified app version: Use a single SemVer for the product (e.g., `2025.1.0-beta.3`) — simplest for users and release management.
+- Pre-releases: Use identifiers like `-alpha.N`, `-beta.N`, `-rc.N` for stage tracking.
+- Build metadata: Optionally include component build info (non-ordering) e.g., `+api.abcd123,dash.efgh456,sch.jkl789,wkr.mno012`.
+- Component traceability: Document component SHAs or image tags under each TECH-CHANGELOG release entry rather than exposing separate user-facing versions.
+- Hotfixes: For backend-only fixes, prefer a patch bump or pre-release increment, and record component metadata under the unified version.
+
 ## 📁 Project Structure
 
 ```
@@ -277,6 +330,8 @@ mosquitto_sub -h localhost -t "infoscreen/+/heartbeat" -v
 - `GET /api/clients` - List all registered clients
 - `PUT /api/clients/{uuid}/group` - Assign client to group
 - `GET /api/groups` - List client groups with alive status
+- `GET /api/groups/order` - Get saved group display order
+- `POST /api/groups/order` - Save group display order (array of group IDs)
 - `GET /api/events` - List events with filtering
 - `POST /api/events` - Create new event
 - `POST /api/events/{id}/occurrences/{date}/detach` - Detach single occurrence from recurring series
@@ -289,6 +344,9 @@ mosquitto_sub -h localhost -t "infoscreen/+/heartbeat" -v
 - `GET /api/files/converted/{path}` - Download converted PDFs
 - `POST /api/conversions/{media_id}/pdf` - Request conversion
 - `GET /api/conversions/{media_id}/status` - Check conversion status
+- `GET /api/eventmedia/stream/<media_id>/<filename>` - Stream media with byte-range support (206) for seeking
+- `POST /api/clients/{uuid}/screenshot` - Upload screenshot for client (base64 JPEG)
+- **Screenshot retention:** Only the latest and last 20 timestamped screenshots per client are stored on the server. Older screenshots are automatically deleted.
 
 ### System Settings
 - `GET /api/system-settings` - List all system settings (admin+)
@@ -297,6 +355,28 @@ mosquitto_sub -h localhost -t "infoscreen/+/heartbeat" -v
 - `DELETE /api/system-settings/{key}` - Delete a setting (admin+)
 - `GET /api/system-settings/supplement-table` - Get WebUntis/Vertretungsplan settings (enabled, url)
 - `POST /api/system-settings/supplement-table` - Update WebUntis/Vertretungsplan settings
+   - Presentation defaults stored as keys:
+      - `presentation_interval` (seconds, default "10")
+      - `presentation_page_progress` ("true"/"false", default "true")
+      - `presentation_auto_progress` ("true"/"false", default "true")
+   - Video defaults stored as keys:
+      - `video_autoplay` ("true"/"false", default "true")
+      - `video_loop` ("true"/"false", default "true")
+      - `video_volume` (0.0–1.0, default "0.8")
+      - `video_muted` ("true"/"false", default "false")
+
+### User Management (Admin+)
+- `GET /api/users` - List all users (role-filtered by user's role)
+- `POST /api/users` - Create new user with username, password (min 6 chars), role, and status
+- `GET /api/users/<id>` - Get user details including audit information (login times, password changes, deactivation)
+- `PUT /api/users/<id>` - Update user (cannot change own role or account status)
+- `PUT /api/users/<id>/password` - Admin password reset (cannot reset own password this way; use `/api/auth/change-password` instead)
+- `DELETE /api/users/<id>` - Delete user permanently (superadmin only; cannot delete self)
+
+### Authentication
+- `POST /api/auth/login` - User login (tracks last login time and failed attempts)
+- `POST /api/auth/logout` - User logout
+- `PUT /api/auth/change-password` - Self-service password change (all authenticated users; requires current password verification)
 
 ### Health & Monitoring
 - `GET /health` - Service health check
@@ -304,6 +384,10 @@ mosquitto_sub -h localhost -t "infoscreen/+/heartbeat" -v
 
 ## 🎨 Frontend Features
 
+### API Response Format
+- **JSON Convention**: All API endpoints return camelCase JSON (e.g., `startTime`, `endTime`, `groupId`). Frontend consumes camelCase directly.
+- **UTC Time Parsing**: API returns ISO strings without 'Z' suffix. Frontend appends 'Z' before parsing to ensure UTC interpretation: `const utcString = dateStr.endsWith('Z') ? dateStr : dateStr + 'Z'; new Date(utcString);`. Display uses `toLocaleTimeString('de-DE')` for German format.
+
 ### Recurrence & holidays
 - Recurrence is handled natively by Syncfusion. The API returns master events with `RecurrenceRule` and `RecurrenceException` (EXDATE) in RFC 5545 format (yyyyMMddTHHmmssZ, UTC) so the Scheduler excludes holiday instances reliably.
 - Events with "skip holidays" display a TentTree icon next to the main event icon (icon color: black). The Scheduler’s native lower-right recurrence badge indicates series membership.
@@ -320,25 +404,62 @@ mosquitto_sub -h localhost -t "infoscreen/+/heartbeat" -v
 - **Notifications**: Toast messages and alerts
  - **Pager**: Used on Programinfo changelog for pagination
  - **Cards (layouts)**: Programinfo sections styled with Syncfusion card classes
- - **SplitButtons**: Header user menu (top-right) using Syncfusion DropDownButton to show current user and role, with actions “Profil” and “Abmelden”.
+ - **SplitButtons**: Header user menu (top-right) using Syncfusion DropDownButton to show current user and role, with actions "Passwort ändern", "Profil", and "Abmelden".
 
 ### Pages Overview
-- **Dashboard**: System overview and statistics
+- **Dashboard**: Card-based overview of all Raumgruppen (room groups) with real-time status monitoring. Features include:
+   - Global statistics: total infoscreens, online/offline counts, warning groups
+   - Filter buttons: All / Online / Offline / Warnings with dynamic counts
+   - Per-group cards showing currently active event (title, type, date/time in local timezone)
+   - Health bar with online/offline ratio and color-coded status
+   - Expandable client list with last alive timestamps
+   - Bulk restart button for offline clients
+   - Auto-refresh every 15 seconds; manual refresh button available
 - **Clients**: Device management and monitoring
 - **Groups**: Client group organization
 - **Events**: Schedule management
 - **Media**: File upload and conversion
+- **Users**: Comprehensive user management (admin+ only in menu)
+   - Full CRUD interface with sortable GridComponent (20 per page)
+   - Statistics cards: total, active, inactive user counts
+   - Create, edit, delete, and password reset dialogs
+   - User details modal showing audit information (login times, password changes, deactivation)
+   - Role badges with color coding (user: gray, editor: blue, admin: green, superadmin: red)
+   - Self-protection: cannot modify own account (cannot change role/status or delete self)
+   - Superadmin-only hard delete; other users soft-deactivate
 - **Settings**: Central configuration (tabbed)
-   - 📅 Academic Calendar (all users): School Holidays import/list and Academic Periods (set active period)
+   - 📅 Academic Calendar (all users):
+      - 📥 Import & Liste: CSV/TXT import combined with holidays list
+      - 🗂️ Perioden: Academic Periods (set active period)
    - 🖥️ Display & Clients (admin+): Defaults placeholders and quick links to Clients/Groups
    - 🎬 Media & Files (admin+): Upload settings placeholders and Conversion status overview
-   - 🗓️ Events (admin+): WebUntis/Vertretungsplan URL enable/disable, save, preview; placeholders for other event types
+   - 🗓️ Events (admin+): WebUntis/Vertretungsplan URL enable/disable, save, preview. Presentations: general defaults for slideshow interval, page-progress, and auto-progress; persisted via `/api/system-settings` keys and applied on create in the event modal. Videos: system-wide defaults for `autoplay`, `loop`, `volume`, and `muted`; persisted via `/api/system-settings` keys and applied on create in the event modal.
    - ⚙️ System (superadmin): Organization info and Advanced configuration placeholders
 - **Holidays**: Academic calendar management
+- **Ressourcen**: Timeline view of active events across all room groups
+   - Parallel timeline display showing all groups and their current events simultaneously
+   - Compact visualization: 65px row height per group with color-coded event bars
+   - Day and week views for flexible time range inspection
+   - Customizable group ordering with visual drag controls (order persisted to backend)
+   - Real-time event status: shows currently running events with type, title, and time window
+   - Filters out unassigned groups for focused view
+   - Resource-based Syncfusion timeline scheduler with resize and drag-drop support
  - **Program info**: Version, build info, tech stack and paginated changelog (reads `dashboard/public/program-info.json`)
 
 ## 🔒 Security & Authentication
 
+- **Role-Based Access Control (RBAC)**: 4-tier hierarchy (user → editor → admin → superadmin) with privilege escalation protection
+  - Admin cannot see, manage, or create superadmin accounts
+  - Admin can create and manage user/editor/admin roles only
+  - Superadmin can manage all roles including other superadmins
+  - Role-gated menu visibility: users only see menu items they have permission for
+- **Account Management**:
+  - Soft-delete by default (deactivated_at, deactivated_by timestamps)
+  - Hard-delete superadmin-only (permanent removal from database)
+  - Self-account protections: cannot change own role/status, cannot delete self via admin panel
+  - Self-service password change available to all authenticated users (requires current password verification)
+  - Admin password reset available for other users (no current password required)
+- **Audit Tracking**: All user accounts track login times, password changes, failed login attempts, and deactivation history
 - **Environment Variables**: Sensitive data via `.env`
 - **SSL/TLS**: HTTPS support with custom certificates
 - **MQTT Security**: Username/password authentication
@@ -349,10 +470,11 @@ mosquitto_sub -h localhost -t "infoscreen/+/heartbeat" -v
 ## 📊 Monitoring & Logging
 
 ### Health Checks
- **Scheduler**: Logging is concise; conversion lookups are cached and logged only once per media.
 - Database: Connection and initialization status
 - MQTT: Pub/sub functionality test
 - Dashboard: Nginx availability
+- **Scheduler**: Logging is concise; conversion lookups are cached and logged only once per media.
+- Dashboard: Nginx availability
 
 ### Logging Strategy
 - **Development**: Docker Compose logs with service prefixes

SCREENSHOT_IMPLEMENTATION.md

@@ -0,0 +1,94 @@
+# Screenshot Transmission Implementation
+
+## Overview
+Clients send screenshots via MQTT during heartbeat intervals. The listener service receives these screenshots and forwards them to the server API for storage.
+
+## Architecture
+
+### MQTT Topic
+- **Topic**: `infoscreen/{uuid}/screenshot`
+- **Payload Format**: 
+  - Raw binary image data (JPEG/PNG), OR
+  - JSON with base64-encoded image: `{"image": "<base64-string>"}`
+
+### Components
+
+#### 1. Listener Service (`listener/listener.py`)
+- **Subscribes to**: `infoscreen/+/screenshot`
+- **Function**: `handle_screenshot(uuid, payload)`
+  - Detects payload format (binary or JSON)
+  - Converts binary to base64 if needed
+  - Forwards to API via HTTP POST
+
+#### 2. Server API (`server/routes/clients.py`)
+- **Endpoint**: `POST /api/clients/<uuid>/screenshot`
+- **Authentication**: No authentication required (internal service call)
+- **Accepts**: 
+  - JSON: `{"image": "<base64-encoded-image>"}`
+  - Binary: raw image data
+- **Storage**: 
+  - Saves to `server/screenshots/{uuid}_{timestamp}.jpg` (with timestamp)
+  - Saves to `server/screenshots/{uuid}.jpg` (latest, for quick retrieval)
+
+#### 3. Retrieval (`server/wsgi.py`)
+- **Endpoint**: `GET /screenshots/<uuid>`
+- **Returns**: Latest screenshot for the given client UUID
+- **Nginx**: Exposes `/screenshots/{uuid}.jpg` in production
+
+## Unified Identification Method
+
+Screenshots are identified by **client UUID**:
+- Each client has a unique UUID stored in the `clients` table
+- Screenshots are stored as `{uuid}.jpg` (latest) and `{uuid}_{timestamp}.jpg` (historical)
+- The API endpoint requires UUID validation against the database
+- Retrieval is done via `GET /screenshots/<uuid>` which returns the latest screenshot
+
+## Data Flow
+
+```
+Client → MQTT (infoscreen/{uuid}/screenshot)
+    ↓
+Listener Service
+    ↓ (validates client exists)
+    ↓ (converts binary → base64 if needed)
+    ↓
+API POST /api/clients/{uuid}/screenshot
+    ↓ (validates client UUID)
+    ↓ (decodes base64 → binary)
+    ↓
+Filesystem: server/screenshots/{uuid}.jpg
+    ↓
+Dashboard/Nginx: GET /screenshots/{uuid}
+```
+
+## Configuration
+
+### Environment Variables
+- **Listener**: `API_BASE_URL` (default: `http://server:8000`)
+- **Server**: Screenshots stored in `server/screenshots/` directory
+
+### Dependencies
+- Listener: Added `requests>=2.31.0` to `listener/requirements.txt`
+- Server: Uses built-in Flask and base64 libraries
+
+## Error Handling
+
+- **Client Not Found**: Returns 404 if UUID doesn't exist in database
+- **Invalid Payload**: Returns 400 if image data is missing or invalid
+- **API Timeout**: Listener logs error and continues (timeout: 10s)
+- **Network Errors**: Listener logs and continues operation
+
+## Security Considerations
+
+- Screenshot endpoint does not require authentication (internal service-to-service)
+- Client UUID must exist in database before screenshot is accepted
+- Base64 encoding prevents binary data issues in JSON transport
+- File size is tracked and logged for monitoring
+
+## Future Enhancements
+
+- Add screenshot retention policy (auto-delete old timestamped files)
+- Add compression before transmission
+- Add screenshot quality settings
+- Add authentication between listener and API
+- Add screenshot history API endpoint

TECH-CHANGELOG.md

@@ -0,0 +1,285 @@
+
+# TECH-CHANGELOG
+
+
+
+This changelog documents technical and developer-relevant changes included in public releases. For development workspace changes, see DEV-CHANGELOG.md. Not all changes here are reflected in the user-facing changelog (`program-info.json`), and not all UI/feature changes are repeated here. Some changes (e.g., backend refactoring, API adjustments, infrastructure, developer tooling, or internal logic) may only appear in TECH-CHANGELOG.md. For UI/feature changes, see `dashboard/public/program-info.json`.
+
+## 2026.1.0-alpha.14 (2026-01-28)
+- 🗓️ **Ressourcen Page (Timeline View)**:
+	- New frontend page: `dashboard/src/ressourcen.tsx` (357 lines) – Parallel timeline view showing active events for all room groups
+	- Uses Syncfusion ScheduleComponent with TimelineViews module for resource-based scheduling
+	- Compact visualization: 65px row height per group, dynamically calculated total container height
+	- Real-time event loading: Fetches events per group for current date range on mount and view/date changes
+	- Timeline modes: Day (default) and Week views with date range calculation
+	- Color-coded event bars: Uses `getGroupColor()` from `groupColors.ts` for group theme matching
+	- Displays first active event per group with type, title, and time window
+	- Filters out "Nicht zugeordnet" group from timeline display
+	- Resource mapping: Each group becomes a timeline resource row, events mapped via `ResourceId`
+	- Syncfusion modules: TimelineViews, Resize, DragAndDrop injected for rich interaction
+- 🎨 **Ressourcen Styling**:
+	- New CSS file: `dashboard/src/ressourcen.css` (178 lines) with modern Material 3 design
+	- Fixed CSS lint errors: Converted `rgba()` to modern `rgb()` notation with percentage alpha values (`rgb(0 0 0 / 10%)`)
+	- Removed unnecessary quotes from font-family names (Roboto, Oxygen, Ubuntu, Cantarell)
+	- Fixed CSS selector specificity ordering (`.e-schedule` before `.ressourcen-timeline-wrapper .e-schedule`)
+	- Card-based controls layout with shadow and rounded corners
+	- Group ordering panel with scrollable list and action buttons
+	- Responsive timeline wrapper with flex layout
+- 🔌 **Group Order API**:
+	- New backend endpoints in `server/routes/groups.py`:
+		- `GET /api/groups/order` – Retrieve saved group display order (returns JSON with `order` array of group IDs)
+		- `POST /api/groups/order` – Persist group display order (accepts JSON with `order` array)
+	- Order persistence: Stored in `system_settings` table with key `group_display_order` (JSON array of integers)
+	- Automatic synchronization: Missing group IDs added to order, removed IDs filtered out
+	- Frontend integration: Group order panel with drag up/down buttons, real-time reordering with backend sync
+- 🖥️ **Frontend Technical**:
+	- State management: React hooks with unused setters removed (setTimelineView, setViewDate) to resolve lint warnings
+	- TypeScript: Changed `let` to `const` for immutable end date calculation
+	- UTC date parsing: Uses parseUTCDate callback to append 'Z' and ensure UTC interpretation
+	- Event formatting: Capitalizes first letter of event type for display (e.g., "Website - Title")
+	- Loading state: Shows loading indicator while fetching group/event data
+	- Schedule height: Dynamic calculation based on `groups.length * 65px + 100px` for header
+- 📖 **Documentation**:
+	- Updated `.github/copilot-instructions.md`:
+		- Added Ressourcen page to "Recent changes" section (January 2026)
+		- Added `ressourcen.tsx` and `ressourcen.css` to "Important files" list
+		- Added Groups API order endpoints documentation
+		- Added comprehensive Ressourcen page section to "Frontend patterns"
+	- Updated `README.md`:
+		- Added Ressourcen page to "Pages Overview" section with feature details
+		- Added `GET/POST /api/groups/order` to Core Resources API section
+	- Bumped version in `dashboard/public/program-info.json` to `2026.1.0-alpha.14` with user-facing changelog
+
+Notes for integrators:
+- Group order API returns JSON with `{ "order": [1, 2, 3, ...] }` structure (array of group IDs)
+- Timeline view automatically filters "Nicht zugeordnet" group for cleaner display
+- CSS follows modern Material 3 color-function notation (`rgb(r g b / alpha%)`)
+- Syncfusion ScheduleComponent requires TimelineViews, Resize, and DragAndDrop modules injected
+
+## 2025.1.0-beta.1 (TBD)
+- 🔐 **User Management & Role-Based Access Control**:
+	- Backend: Implemented comprehensive user management API (`server/routes/users.py`) with 6 endpoints (GET, POST, PUT, DELETE users + password reset).
+	- Data model: Extended `User` with 7 audit/security fields via Alembic migration (`4f0b8a3e5c20_add_user_audit_fields.py`):
+		- `last_login_at`, `last_password_change_at`: TIMESTAMP (UTC) for auth event tracking
+		- `failed_login_attempts`, `last_failed_login_at`: Security monitoring for brute-force detection
+		- `locked_until`: TIMESTAMP placeholder for account lockout (infrastructure in place, not yet enforced)
+		- `deactivated_at`, `deactivated_by`: Soft-delete audit trail (FK self-reference)
+	- Role hierarchy: 4-tier privilege escalation (user → editor → admin → superadmin) enforced at API and UI levels:
+		- Admin cannot see, create, or manage superadmin accounts
+		- Admin can manage user/editor/admin roles only
+		- Superadmin can manage all roles including other superadmins
+	- Auth routes enhanced (`server/routes/auth.py`):
+		- Login: Sets `last_login_at`, resets `failed_login_attempts` on success; increments `failed_login_attempts` and `last_failed_login_at` on failure
+		- Password change: Sets `last_password_change_at` on both self-service and admin reset
+		- New endpoint: `PUT /api/auth/change-password` for self-service password change (all authenticated users; requires current password verification)
+	- User API security:
+		- Admin cannot reset superadmin passwords
+		- Self-account protections: cannot change own role/status, cannot delete self
+		- Admin cannot use password reset endpoint for their own account (backend check enforces self-service requirement)
+		- All user responses include audit fields in camelCase (lastLoginAt, lastPasswordChangeAt, failedLoginAttempts, deactivatedAt, deactivatedBy)
+	- Soft-delete pattern: Deactivation by default (sets `deactivated_at` and `deactivated_by`); hard-delete superadmin-only
+- 🖥️ **Frontend User Management**:
+	- New page: `dashboard/src/users.tsx` – Full CRUD interface (820 lines) with Syncfusion components
+	- GridComponent: 20 per page (configurable), sortable columns (ID, username, role), custom action button template with role-based visibility
+	- Statistics cards: Total users, active (non-deactivated), inactive (deactivated) counts
+	- Dialogs: Create (username/password/role/status), Edit (with self-edit protections), Password Reset (admin only, no current password required), Delete (superadmin only, self-check), Details (read-only audit info with formatted timestamps)
+	- Role badges: Color-coded display (user: gray, editor: blue, admin: green, superadmin: red)
+	- Audit information display: last login, password change, last failed login, deactivation timestamps and deactivating user
+	- Self-protection: Delete button hidden for current user (prevents accidental self-deletion)
+	- Menu visibility: "Benutzer" sidebar item only visible to admin+ (role-gated in App.tsx)
+- 💬 **Header User Menu**:
+	- Enhanced top-right dropdown with "Passwort ändern" (lock icon), "Profil", and "Abmelden"
+	- Self-service password change dialog: Available to all authenticated users; requires current password verification, new password min 6 chars, must match confirm field
+	- Implemented with Syncfusion DropDownButton (`@syncfusion/ej2-react-splitbuttons`)
+- 🔌 **API Client**:
+	- New file: `dashboard/src/apiUsers.ts` – Type-safe TypeScript client (143 lines) for user operations
+	- Functions: listUsers(), getUser(), createUser(), updateUser(), resetUserPassword(), deleteUser()
+	- All functions include proper error handling and camelCase JSON mapping
+- 📖 **Documentation**:
+	- Updated `.github/copilot-instructions.md`: Added comprehensive sections on user model audit fields, user management API routes, auth routes, header menu, and user management page implementation
+	- Updated `README.md`: Added user management to Key Features, API endpoints (User Management + Authentication sections), Pages Overview, and Security & Authentication sections with RBAC details
+	- Updated `TECH-CHANGELOG.md`: Documented all technical changes and integration notes
+
+Notes for integrators:
+- User CRUD endpoints accept/return all audit fields in camelCase
+- Admin password reset (`PUT /api/users/<id>/password`) cannot be used for admin's own account; users must use self-service endpoint
+- Frontend enforces role-gated menu visibility; backend validates all role transitions to prevent privilege escalation
+- Soft-delete is default; hard-delete (superadmin-only) requires explicit confirmation
+- Audit fields populated automatically on login/logout/password-change/deactivation events
+
+
+
+Backend rework (post-release notes; no version bump):
+- 🧩 Dev Container hygiene: Remote Containers runs on UI (`remote.extensionKind`), removed in-container install to prevent reappearance loops; switched `postCreateCommand` to `npm ci` for reproducible dashboard installs; `postStartCommand` aliases made idempotent.
+- 🔄 Serialization: Consolidated snake_case→camelCase via `server/serializers.py` for all JSON outputs; ensured enums/UTC datetimes serialize consistently across routes.
+- 🕒 Time handling: Normalized naive timestamps to UTC in all back-end comparisons (events, scheduler, groups) and kept ISO strings without `Z` in API responses; frontend appends `Z`.
+- 📡 Streaming: Stabilized range-capable endpoint (`/api/eventmedia/stream/<media_id>/<filename>`), clarified client handling; scheduler emits basic HEAD-probe metadata (`mime_type`, `size`, `accept_ranges`).
+- 📅 Recurrence/exceptions: Ensured EXDATE tokens (RFC 5545 UTC) align with occurrence start; detached-occurrence flow confirmed via `POST /api/events/<id>/occurrences/<date>/detach`.
+- 🧰 Routes cleanup: Applied `dict_to_camel_case()` before `jsonify()` uniformly; verified Session lifecycle consistency (open/commit/close) across blueprints.
+- 🔄 **API Naming Convention Standardization**:
+	- Created `server/serializers.py` with `dict_to_camel_case()` and `dict_to_snake_case()` utilities for consistent JSON serialization
+	- Events API refactored: `GET /api/events` and `GET /api/events/<id>` now return camelCase JSON (`id`, `subject`, `startTime`, `endTime`, `type`, `groupId`, etc.) instead of PascalCase
+	- Internal event dictionaries use snake_case keys, then converted to camelCase via `dict_to_camel_case()` before `jsonify()`
+	- **Breaking**: External API consumers must update field names from PascalCase to camelCase
+- ⏰ **UTC Time Handling**:
+	- Standardized datetime handling: Database stores timestamps in UTC (naive timestamps normalized by backend)
+	- API returns ISO strings without 'Z' suffix: `"2025-11-27T20:03:00"`
+	- Frontend appends 'Z' to parse as UTC and displays in user's local timezone via `toLocaleTimeString('de-DE')`
+	- All time comparisons use UTC; `date.toISOString()` sends UTC back to API
+- 🖥️ **Dashboard Major Redesign**:
+	- Completely redesigned dashboard with card-based layout for Raumgruppen (room groups)
+	- Global statistics summary card: total infoscreens, online/offline counts, warning groups
+	- Filter buttons with dynamic counts: All, Online, Offline, Warnings
+	- Active event display per group: shows currently playing content with type icon, title, date ("Heute"/"Morgen"/date), and time range
+	- Health visualization: color-coded progress bars showing online/offline ratio per group
+	- Expandable client details: shows last alive timestamps with human-readable format ("vor X Min.", "vor X Std.", "vor X Tagen")
+	- Bulk restart functionality: restart all offline clients in a group
+	- Manual refresh button with toast notifications
+	- 15-second auto-refresh interval
+	- "Nicht zugeordnet" group always appears last in sorted list
+- 🎨 **Frontend Technical**:
+	- Dashboard (`dashboard/src/dashboard.tsx`): Uses Syncfusion ButtonComponent, ToastComponent, and card CSS classes
+	- Appointments page updated to map camelCase API responses to internal PascalCase for Syncfusion compatibility
+	- Time formatting functions (`formatEventTime`, `formatEventDate`) handle UTC string parsing with 'Z' appending
+	- TypeScript lint errors resolved: unused error variables removed, null safety checks added with optional chaining
+- 📖 **Documentation**:
+	- Updated `.github/copilot-instructions.md` with comprehensive sections on:
+		- API patterns: JSON serialization, datetime handling conventions
+		- Frontend patterns: API response format, UTC time parsing
+		- Dashboard page overview with features
+		- Conventions & gotchas: datetime and JSON naming guidelines
+	- Updated `README.md` with recent changes, API response format section, and dashboard page details
+
+Notes for integrators:
+- **Breaking change**: All Events API endpoints now return camelCase field names. Update client code accordingly.
+- Frontend must append 'Z' to API datetime strings before parsing: `const utcStr = dateStr.endsWith('Z') ? dateStr : dateStr + 'Z'; new Date(utcStr);`
+- Use `dict_to_camel_case()` from `server/serializers.py` for any new API endpoints returning JSON
+ - Dev container: prefer `npm ci` and UI-only Remote Containers to avoid extension drift in-container.
+
+---
+
+### Component build metadata template (for traceability)
+Record component builds under the unified app version when releasing:
+
+```
+Component builds for this release
+- API: image tag `ghcr.io/robbstarkaustria/api:<short-sha>` (commit `<sha>`)
+- Dashboard: image tag `ghcr.io/robbstarkaustria/dashboard:<short-sha>` (commit `<sha>`)
+- Scheduler: image tag `ghcr.io/robbstarkaustria/scheduler:<short-sha>` (commit `<sha>`)
+- Listener: image tag `ghcr.io/robbstarkaustria/listener:<short-sha>` (commit `<sha>`)
+- Worker: image tag `ghcr.io/robbstarkaustria/worker:<short-sha>` (commit `<sha>`)
+```
+
+This is informational (build metadata) and does not change the user-facing version number.
+
+## 2025.1.0-alpha.11 (2025-11-05)
+- 🗃️ Data model & API:
+	- Added `muted` (Boolean) to `Event` with Alembic migration; create/update and GET endpoints now accept, persist, and return `muted` alongside `autoplay`, `loop`, and `volume` for video events.
+	- Video event fields consolidated: `event_media_id`, `autoplay`, `loop`, `volume`, `muted`.
+- 🔗 Streaming:
+	- Added range-capable streaming endpoint: `GET /api/eventmedia/stream/<media_id>/<filename>` (supports byte-range requests 206 for seeking).
+	- Scheduler: Performs a best-effort HEAD probe for video stream URLs and includes basic metadata in the emitted payload (`mime_type`, `size`, `accept_ranges`). Placeholders added for `duration`, `resolution`, `bitrate`, `qualities`, `thumbnails`, `checksum`.
+- 🖥️ Frontend/Dashboard:
+	- Settings page refactored to nested tabs with controlled tab selection (`selectedItem`) to prevent sub-tab jumps.
+	- Settings → Events → Videos: Added system-wide defaults with load/save via system settings keys: `video_autoplay`, `video_loop`, `video_volume`, `video_muted`.
+	- Event modal (CustomEventModal): Exposes per-event video options including “Ton aus” (`muted`) and initializes all video fields from system defaults when creating new events.
+	- Academic Calendar (Settings): Merged “Schulferien Import” and “Liste” into a single sub-tab “📥 Import & Liste”.
+- 📖 Documentation:
+	- Updated `README.md` and `.github/copilot-instructions.md` for video payload (incl. `muted`), streaming endpoint (206), nested Settings tabs, and video defaults keys; clarified client handling of `video` payloads.
+	- Updated `dashboard/public/program-info.json` (user-facing changelog) and bumped version to `2025.1.0-alpha.11` with corresponding UI/UX notes.
+
+Notes for integrators:
+- Clients should parse `event_type` and handle the nested `video` payload, honoring `autoplay`, `loop`, `volume`, and `muted`. Use the streaming endpoint with HTTP Range for seeking.
+- System settings keys for video defaults: `video_autoplay`, `video_loop`, `video_volume`, `video_muted`.
+
+## 2025.1.0-alpha.10 (2025-10-25)
+- No new developer-facing changes in this release.
+- UI/UX updates are documented in `dashboard/public/program-info.json`:
+	- Event modal: Surfaced video options (Autoplay, Loop, Volume).
+	- FileManager: Increased upload limits (Full-HD); client-side duration validation (max 10 minutes).
+
+## 2025.1.0-alpha.9 (2025-10-19)
+- 🗓️ Events/API:
+	- Implemented new `webuntis` event type. Event creation now resolves the URL from the system setting `supplement_table_url`; returns 400 if unset.
+	- Removed obsolete `webuntis-url` settings endpoints. Use `GET/POST /api/system-settings/supplement-table` for URL and enabled state (shared for WebUntis/Vertretungsplan).
+	- Initialization defaults: dropped `webuntis_url`; updated `supplement_table_url` description to “Vertretungsplan / WebUntis”.
+- 🚦 Scheduler payloads:
+	- Unified Website/WebUntis payload: both emit a nested `website` object `{ "type": "browser", "url": "…" }`; `event_type` remains either `website` or `webuntis` for dispatch.
+	- Payloads now include a top-level `event_type` string for all events to aid client dispatch.
+- 🖥️ Frontend/Dashboard:
+	- Program info updated to `2025.1.0-alpha.13` with release notes.
+	- Settings → Events: WebUntis now uses the existing Supplement-Table URL; no separate WebUntis URL field.
+	- Event modal: WebUntis type behaves like Website (no per-event URL input).
+- 📖 Documentation:
+	- Added `MQTT_EVENT_PAYLOAD_GUIDE.md` (message structure, client best practices, versioning).
+	- Added `WEBUNTIS_EVENT_IMPLEMENTATION.md` (design notes, admin setup, testing checklist).
+	- Updated `.github/copilot-instructions.md` and `README.md` for the unified Website/WebUntis handling and settings usage.
+
+Notes for integrators:
+- If you previously integrated against `/api/system-settings/webuntis-url`, migrate to `/api/system-settings/supplement-table`.
+- Clients should now parse `event_type` and use the corresponding nested payload (`presentation`, `website`, …). `webuntis` and `website` should be handled identically (nested `website` payload).
+
+
+## 2025.1.0-alpha.8 (2025-10-18)
+- 🛠️ Backend: Seeded presentation defaults (`presentation_interval`, `presentation_page_progress`, `presentation_auto_progress`) in system settings; applied on event creation.
+- 🗃️ Data model: Added `page_progress` and `auto_progress` fields to `Event` (with Alembic migration).
+- 🗓️ Scheduler: Now publishes only currently active events per group (at "now"); clears retained topics by publishing `[]` for groups with no active events; normalizes naive timestamps and compares times in UTC; presentation payloads include `page_progress` and `auto_progress`.
+- 🖥️ Dashboard: Settings → Events tab now includes Presentations defaults (interval, page-progress, auto-progress) with load/save via API; event modal applies defaults on create and persists per-event values on edit.
+- 📖 Docs: Updated README and Copilot instructions for new scheduler behavior, UTC handling, presentation defaults, and per-event flags.
+
+---
+
+## 2025.1.0-alpha.11 (2025-10-16)
+- ✨ Settings page: New tab layout (Syncfusion) with role-based visibility – Tabs: 📅 Academic Calendar, 🖥️ Display & Clients, 🎬 Media & Files, 🗓️ Events, ⚙️ System.
+- 🛠️ Settings (Technical): API calls now use relative /api paths via the Vite proxy (prevents CORS and double /api).
+- 📖 Docs: README updated for settings page (tabs) and system settings API.
+
+## 2025.1.0-alpha.10 (2025-10-15)
+- 🔐 Auth: Login and user management implemented (role-based, persistent sessions).
+- 🧩 Frontend: Syncfusion SplitButtons integrated (react-splitbuttons) and Vite config updated for pre-bundling.
+- 🐛 Fix: Import error ‘@syncfusion/ej2-react-splitbuttons’ – instructions added to README (optimizeDeps + volume reset).
+
+## 2025.1.0-alpha.9 (2025-10-14)
+- ✨ UI: Unified deletion workflow for appointments – all types (single, single instance, entire series) handled with custom dialogs.
+- 🔧 Frontend: Syncfusion RecurrenceAlert and DeleteAlert intercepted and replaced with custom dialogs (including final confirmation for series deletion).
+- 📖 Docs: README and Copilot instructions expanded for deletion workflow and dialog handling.
+
+## 2025.1.0-alpha.8 (2025-10-11)
+- 🎨 Theme: Migrated to Syncfusion Material 3; centralized CSS imports in main.tsx
+- 🧹 Cleanup: Tailwind CSS completely removed (packages, PostCSS, Stylelint, config files)
+- 🧩 Group management: "infoscreen_groups" migrated to Syncfusion components (Buttons, Dialogs, DropDownList, TextBox); improved spacing
+- 🔔 Notifications: Unified toast/dialog wording; last alert usage replaced
+- 📖 Docs: README and Copilot instructions updated (Material 3, centralized styles, no Tailwind)
+
+## 2025.1.0-alpha.7 (2025-09-21)
+- 🧭 UI: Period selection (Syncfusion) next to group selection; compact layout
+- ✅ Display: Badge for existing holiday plan + counter ‘Holidays in view’
+- 🛠️ API: Endpoints for academic periods (list, active GET/POST, for_date)
+- 📅 Scheduler: By default, no scheduling during holidays; block display like all-day event; black text color
+- 📤 Holidays: Upload from TXT/CSV (headless TXT uses columns 2–4)
+- 🔧 UX: Switches in a row; dropdown widths optimized
+
+## 2025.1.0-alpha.6 (2025-09-20)
+- 🗓️ NEW: Academic periods system – support for school years, semesters, trimesters
+- 🏗️ DATABASE: New 'academic_periods' table for time-based organization
+- 🔗 EXTENDED: Events and media can now optionally be linked to an academic period
+- 📊 ARCHITECTURE: Fully backward-compatible implementation for gradual rollout
+- ⚙️ TOOLS: Automatic creation of standard school years for Austrian schools
+
+## 2025.1.0-alpha.5 (2025-09-14)
+- Backend: Complete redesign of backend handling for group assignments of new clients and steps for changing group assignment.
+
+## 2025.1.0-alpha.4 (2025-09-01)
+- Deployment: Base structure for deployment tested and optimized.
+- FIX: Program error when switching view on media page fixed.
+
+## 2025.1.0-alpha.3 (2025-08-30)
+- NEW: Program info page with dynamic data, build info, and changelog.
+- NEW: Logout functionality implemented.
+- FIX: Sidebar width corrected in collapsed state.
+
+## 2025.1.0-alpha.2 (2025-08-29)
+- INFO: Analysis and display of used open-source libraries.
+
+## 2025.1.0-alpha.1 (2025-08-28)
+- Initial project setup and base structure.

WEBUNTIS_EVENT_IMPLEMENTATION.md

@@ -0,0 +1,324 @@
+# WebUntis Event Type Implementation
+
+**Date**: 2025-10-19  
+**Status**: Completed
+
+## Summary
+
+Implemented support for a new `webuntis` event type that displays a centrally-configured WebUntis website on infoscreen clients. This event type follows the same client-side behavior as `website` events but sources its URL from system settings rather than per-event configuration.
+
+## Changes Made
+
+### 1. Database & Models
+
+The `webuntis` event type was already defined in the `EventType` enum in `models/models.py`:
+
+```python
+class EventType(enum.Enum):
+    presentation = "presentation"
+    website = "website"
+    video = "video"
+    message = "message"
+    other = "other"
+    webuntis = "webuntis"  # Already present
+```
+
+### 2. System Settings
+
+#### Default Initialization (`server/init_defaults.py`)
+
+Updated `supplement_table_url` description to indicate it's used for both Vertretungsplan and WebUntis:
+
+```python
+('supplement_table_url', '', 'URL für Vertretungsplan / WebUntis (Stundenplan-Änderungstabelle)')
+```
+
+This setting is automatically seeded during database initialization.
+
+**Note**: The same URL (`supplement_table_url`) is used for both:
+- Vertretungsplan (supplement table) displays
+- WebUntis event displays
+
+#### API Endpoints (`server/routes/system_settings.py`)
+
+WebUntis events use the existing supplement table endpoints:
+
+- **`GET /api/system-settings/supplement-table`** (Admin+)
+  - Returns: `{"url": "https://...", "enabled": true/false}`
+  
+- **`POST /api/system-settings/supplement-table`** (Admin+)
+  - Body: `{"url": "https://...", "enabled": true/false}`
+  - Updates the URL used for both supplement table and WebUntis events
+
+No separate WebUntis URL endpoint is needed—the supplement table URL serves both purposes.
+
+### 3. Event Creation (`server/routes/events.py`)
+
+Added handling for `webuntis` event type in `create_event()`:
+
+```python
+# WebUntis: URL aus System-Einstellungen holen und EventMedia anlegen
+if event_type == "webuntis":
+    # Hole WebUntis-URL aus Systemeinstellungen (verwendet supplement_table_url)
+    webuntis_setting = session.query(SystemSetting).filter_by(key='supplement_table_url').first()
+    webuntis_url = webuntis_setting.value if webuntis_setting else ''
+    
+    if not webuntis_url:
+        return jsonify({"error": "WebUntis / Supplement table URL not configured in system settings"}), 400
+    
+    # EventMedia für WebUntis anlegen
+    media = EventMedia(
+        media_type=MediaType.website,
+        url=webuntis_url,
+        file_path=webuntis_url
+    )
+    session.add(media)
+    session.commit()
+    event_media_id = media.id
+```
+
+**Workflow**:
+1. Check if `supplement_table_url` is configured in system settings
+2. Return error if not configured
+3. Create `EventMedia` with `MediaType.website` using the supplement table URL
+4. Associate the media with the event
+
+### 4. Scheduler Payload (`scheduler/db_utils.py`)
+
+Modified `format_event_with_media()` to handle both `website` and `webuntis` events:
+
+```python
+# Handle website and webuntis events (both display a website)
+elif event.event_type.value in ("website", "webuntis"):
+    event_dict["website"] = {
+        "type": "browser",
+        "url": media.url if media.url else None
+    }
+    if media.id not in _media_decision_logged:
+        logging.debug(
+            f"[Scheduler] Using website URL for event_media_id={media.id} (type={event.event_type.value}): {media.url}")
+        _media_decision_logged.add(media.id)
+```
+
+**Key Points**:
+- Both event types use the same `website` payload structure
+- Clients interpret `event_type` but handle display identically
+- URL is already resolved from system settings during event creation
+
+### 5. Documentation
+
+Created comprehensive documentation in `MQTT_EVENT_PAYLOAD_GUIDE.md` covering:
+- MQTT message structure
+- Event type-specific payloads
+- Best practices for client implementation
+- Versioning strategy
+- System settings integration
+
+## MQTT Message Format
+
+### WebUntis Event Payload
+
+```json
+{
+  "id": 125,
+  "event_type": "webuntis",
+  "title": "Schedule Display",
+  "start": "2025-10-19T09:00:00+00:00",
+  "end": "2025-10-19T09:30:00+00:00",
+  "group_id": 1,
+  "website": {
+    "type": "browser",
+    "url": "https://webuntis.example.com/schedule"
+  }
+}
+```
+
+### Website Event Payload (for comparison)
+
+```json
+{
+  "id": 124,
+  "event_type": "website",
+  "title": "School Website",
+  "start": "2025-10-19T09:00:00+00:00",
+  "end": "2025-10-19T09:30:00+00:00",
+  "group_id": 1,
+  "website": {
+    "type": "browser",
+    "url": "https://example.com/page"
+  }
+}
+```
+
+## Client Implementation Guide
+
+Clients should handle both `website` and `webuntis` event types identically:
+
+```javascript
+function parseEvent(event) {
+  switch (event.event_type) {
+    case 'presentation':
+      return handlePresentation(event.presentation);
+    
+    case 'website':
+    case 'webuntis':
+      // Both types use the same display logic
+      return handleWebsite(event.website);
+    
+    case 'video':
+      return handleVideo(event.video);
+    
+    default:
+      console.warn(`Unknown event type: ${event.event_type}`);
+  }
+}
+
+function handleWebsite(websiteData) {
+  // websiteData = { type: "browser", url: "https://..." }
+  if (!websiteData.url) {
+    console.error('Website event missing URL');
+    return;
+  }
+  
+  // Display URL in embedded browser/webview
+  displayInBrowser(websiteData.url);
+}
+```
+
+## Best Practices
+
+### 1. Type-Based Dispatch
+Always check `event_type` first and dispatch to appropriate handlers. The nested payload structure (`presentation`, `website`, etc.) provides type-specific details.
+
+### 2. Graceful Error Handling
+- Validate URLs before displaying
+- Handle missing or empty URLs gracefully
+- Provide user-friendly error messages
+
+### 3. Unified Website Display
+Both `website` and `webuntis` events trigger the same browser/webview component. The only difference is in event creation (per-event URL vs. system-wide URL).
+
+### 4. Extensibility
+The message structure supports adding new event types without breaking existing clients:
+- Old clients ignore unknown `event_type` values
+- New fields in existing payloads are optional
+- Nested objects isolate type-specific changes
+
+## Administrative Setup
+
+### Setting the WebUntis / Supplement Table URL
+
+The same URL is used for both Vertretungsplan (supplement table) and WebUntis displays.
+
+1. **Via API** (recommended for UI integration):
+   ```bash
+   POST /api/system-settings/supplement-table
+   {
+     "url": "https://webuntis.example.com/schedule",
+     "enabled": true
+   }
+   ```
+
+2. **Via Database** (for initial setup):
+   ```sql
+   INSERT INTO system_settings (`key`, value, description) 
+   VALUES ('supplement_table_url', 'https://webuntis.example.com/schedule', 
+           'URL für Vertretungsplan / WebUntis (Stundenplan-Änderungstabelle)');
+   ```
+
+3. **Via Dashboard**:
+   Settings → Events → WebUntis / Vertretungsplan
+
+### Creating a WebUntis Event
+
+Once the URL is configured, events can be created through:
+
+1. **Dashboard UI**: Select "WebUntis" as event type
+2. **API**: 
+   ```json
+   POST /api/events
+   {
+     "group_id": 1,
+     "title": "Daily Schedule",
+     "description": "Current class schedule",
+     "start": "2025-10-19T08:00:00Z",
+     "end": "2025-10-19T16:00:00Z",
+     "event_type": "webuntis",
+     "created_by": 1
+   }
+   ```
+
+No `website_url` is required—it's automatically fetched from the `supplement_table_url` system setting.
+
+## Migration Notes
+
+### From Presentation-Only System
+
+This implementation extends the existing event system without breaking presentation events:
+
+- **Presentation events**: Still use `presentation` payload with `files` array
+- **Website/WebUntis events**: Use new `website` payload with `url` field
+- **Message structure**: Includes `event_type` for client-side dispatch
+
+### Future Event Types
+
+The pattern established here can be extended to other event types:
+
+- **Video**: `event_dict["video"] = { "type": "media", "url": "...", "autoplay": true }`
+- **Message**: `event_dict["message"] = { "type": "html", "content": "..." }`
+- **Custom**: Any new type with its own nested payload
+
+## Testing Checklist
+
+- [x] Database migration includes `webuntis` enum value
+- [x] System setting `supplement_table_url` description updated to include WebUntis
+- [x] Event creation validates supplement_table_url is configured
+- [x] Event creation creates `EventMedia` with supplement table URL
+- [x] Scheduler includes `website` payload for `webuntis` events
+- [x] MQTT message structure documented
+- [x] No duplicate webuntis_url setting (uses supplement_table_url)
+- [ ] Dashboard UI shows supplement table URL is used for WebUntis (documentation)
+- [ ] Client implementation tested with WebUntis events (client-side)
+
+## Related Files
+
+### Modified
+- `scheduler/db_utils.py` - Event formatting logic
+- `server/routes/events.py` - Event creation handling
+- `server/routes/system_settings.py` - WebUntis URL endpoints
+- `server/init_defaults.py` - System setting defaults
+
+### Created
+- `MQTT_EVENT_PAYLOAD_GUIDE.md` - Comprehensive message format documentation
+- `WEBUNTIS_EVENT_IMPLEMENTATION.md` - This file
+
+### Existing (Not Modified)
+- `models/models.py` - Already had `webuntis` enum value
+- `dashboard/src/components/CustomEventModal.tsx` - Already supports webuntis type
+
+## Further Enhancements
+
+### Short-term
+1. Add WebUntis URL configuration to dashboard Settings page
+2. Update event creation UI to explain WebUntis URL comes from settings
+3. Add validation/preview for WebUntis URL in settings
+
+### Long-term
+1. Support multiple WebUntis instances (per-school in multi-tenant setup)
+2. Add WebUntis-specific metadata (class filter, room filter, etc.)
+3. Implement iframe sandboxing options for security
+4. Add refresh intervals for dynamic WebUntis content
+
+## Conclusion
+
+The `webuntis` event type is now fully integrated into the infoscreen system. It uses the existing `supplement_table_url` system setting, which serves dual purposes:
+1. **Vertretungsplan (supplement table)** displays in the existing settings UI
+2. **WebUntis schedule** displays via the webuntis event type
+
+This provides a clean separation between system-wide URL configuration and per-event scheduling, while maintaining backward compatibility and following established patterns for event payload structure.
+
+The implementation demonstrates best practices:
+- **Reuse existing infrastructure**: Uses supplement_table_url instead of creating duplicate settings
+- **Consistency**: Follows same patterns as existing event types
+- **Extensibility**: Easy to add new event types following this model
+- **Documentation**: Comprehensive guides for both developers and clients

dashboard/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

dashboard/package.json

@@ -10,34 +10,36 @@
     "preview": "vite preview"
   },
   "dependencies": {
-  "@syncfusion/ej2-base": "^30.2.0",
-  "@syncfusion/ej2-buttons": "^30.2.0",
-  "@syncfusion/ej2-calendars": "^30.2.0",
-  "@syncfusion/ej2-dropdowns": "^30.2.0",
-  "@syncfusion/ej2-grids": "^30.2.0",
-  "@syncfusion/ej2-icons": "^30.2.0",
-  "@syncfusion/ej2-inputs": "^30.2.0",
-  "@syncfusion/ej2-kanban": "^30.2.0",
-  "@syncfusion/ej2-layouts": "^30.2.0",
-  "@syncfusion/ej2-lists": "^30.2.0",
-  "@syncfusion/ej2-navigations": "^30.2.0",
-  "@syncfusion/ej2-notifications": "^30.2.0",
-  "@syncfusion/ej2-popups": "^30.2.0",
-  "@syncfusion/ej2-react-base": "^30.2.0",
-  "@syncfusion/ej2-react-buttons": "^30.2.0",
-  "@syncfusion/ej2-react-calendars": "^30.2.0",
-  "@syncfusion/ej2-react-dropdowns": "^30.2.0",
-  "@syncfusion/ej2-react-filemanager": "^30.2.0",
-  "@syncfusion/ej2-react-grids": "^30.2.0",
-  "@syncfusion/ej2-react-inputs": "^30.2.0",
-  "@syncfusion/ej2-react-kanban": "^30.2.0",
-  "@syncfusion/ej2-react-layouts": "^30.2.0",
-  "@syncfusion/ej2-react-navigations": "^30.2.0",
-  "@syncfusion/ej2-react-notifications": "^30.2.0",
-  "@syncfusion/ej2-react-popups": "^30.2.0",
-  "@syncfusion/ej2-react-schedule": "^30.2.0",
-  "@syncfusion/ej2-react-splitbuttons": "^30.2.0",
-  "@syncfusion/ej2-splitbuttons": "^30.2.0",
+    "@syncfusion/ej2-base": "^30.2.0",
+    "@syncfusion/ej2-buttons": "^30.2.0",
+    "@syncfusion/ej2-calendars": "^30.2.0",
+    "@syncfusion/ej2-dropdowns": "^30.2.0",
+    "@syncfusion/ej2-gantt": "^32.1.23",
+    "@syncfusion/ej2-grids": "^30.2.0",
+    "@syncfusion/ej2-icons": "^30.2.0",
+    "@syncfusion/ej2-inputs": "^30.2.0",
+    "@syncfusion/ej2-kanban": "^30.2.0",
+    "@syncfusion/ej2-layouts": "^30.2.0",
+    "@syncfusion/ej2-lists": "^30.2.0",
+    "@syncfusion/ej2-navigations": "^30.2.0",
+    "@syncfusion/ej2-notifications": "^30.2.0",
+    "@syncfusion/ej2-popups": "^30.2.0",
+    "@syncfusion/ej2-react-base": "^30.2.0",
+    "@syncfusion/ej2-react-buttons": "^30.2.0",
+    "@syncfusion/ej2-react-calendars": "^30.2.0",
+    "@syncfusion/ej2-react-dropdowns": "^30.2.0",
+    "@syncfusion/ej2-react-filemanager": "^30.2.0",
+    "@syncfusion/ej2-react-gantt": "^32.1.23",
+    "@syncfusion/ej2-react-grids": "^30.2.0",
+    "@syncfusion/ej2-react-inputs": "^30.2.0",
+    "@syncfusion/ej2-react-kanban": "^30.2.0",
+    "@syncfusion/ej2-react-layouts": "^30.2.0",
+    "@syncfusion/ej2-react-navigations": "^30.2.0",
+    "@syncfusion/ej2-react-notifications": "^30.2.0",
+    "@syncfusion/ej2-react-popups": "^30.2.0",
+    "@syncfusion/ej2-react-schedule": "^30.2.0",
+    "@syncfusion/ej2-react-splitbuttons": "^30.2.0",
+    "@syncfusion/ej2-splitbuttons": "^30.2.0",
     "cldr-data": "^36.0.4",
     "lucide-react": "^0.522.0",
     "react": "^19.1.0",

dashboard/public/program-info.json

@@ -1,11 +1,11 @@
 {
   "appName": "Infoscreen-Management",
-  "version": "2025.1.0-alpha.11",
-  "copyright": "© 2025 Third-Age-Applications",
+  "version": "2026.1.0-alpha.14",
+  "copyright": "© 2026 Third-Age-Applications",
   "supportContact": "support@third-age-applications.com",
   "description": "Eine zentrale Verwaltungsoberfläche für digitale Informationsbildschirme.",
   "techStack": {
-    "Frontend": "React, Vite, TypeScript",
+  "Frontend": "React, Vite, TypeScript, Syncfusion UI Components (Material 3)",
     "Backend": "Python (Flask), SQLAlchemy",
     "Database": "MariaDB",
     "Realtime": "Mosquitto (MQTT)",
@@ -26,112 +26,146 @@
     ]
   },
   "buildInfo": {
-    "buildDate": "2025-09-20T11:00:00Z",
-    "commitId": "8d1df7199cb7"
+    "buildDate": "2025-12-29T12:00:00Z",
+    "commitId": "9f2ae8b44c3a"
   },
   "changelog": [
     {
-      "version": "2025.1.0-alpha.11",
-      "date": "2025-10-16",
+      "version": "2026.1.0-alpha.14",
+      "date": "2026-01-28",
       "changes": [
-        "✨ Einstellungen-Seite: Neues Tab-Layout (Syncfusion) mit rollenbasierter Sichtbarkeit – Tabs: 📅 Akademischer Kalender, 🖥️ Anzeige & Clients, 🎬 Medien & Dateien, 🗓️ Events, ⚙️ System.",
-        "🗓️ Einstellungen › Events: WebUntis/Vertretungsplan – Zusatz-Tabelle (URL) in den Events-Tab verschoben; Aktivieren/Deaktivieren, Speichern und Vorschau; systemweite Einstellung.",
-        "📅 Einstellungen › Akademischer Kalender: Aktive akademische Periode kann direkt gesetzt werden.",
-        "🛠️ Einstellungen (Technik): API-Aufrufe nutzen nun relative /api‑Pfade über den Vite‑Proxy (verhindert CORS bzw. doppeltes /api).",
-        "📖 Doku: README zur Einstellungen-Seite (Tabs) und System-Settings-API ergänzt."
+        "✨ UI: Neue 'Ressourcen'-Seite mit Timeline-Ansicht zeigt aktive Events für alle Raumgruppen parallel.",
+        "📊 Ressourcen: Kompakte Zeitachsen-Darstellung.",
+        "🎯 Ressourcen: Zeigt aktuell laufende Events mit Typ, Titel und Zeitfenster in Echtzeit.",
+        "🔄 Ressourcen: Gruppensortierung anpassbar mit visueller Reihenfolgen-Verwaltung.",
+        "🎨 Ressourcen: Farbcodierte Event-Balken entsprechend dem Gruppen-Theme."
+      ]
+    },
+    {
+      "version": "2025.1.0-alpha.13",
+      "date": "2025-12-29",
+      "changes": [
+        "👥 UI: Neue 'Benutzer'-Seite mit vollständiger Benutzerverwaltung (CRUD) für Admins und Superadmins.",
+        "🔐 Benutzer-Seite: Sortierbare Gitter-Tabelle mit Benutzer-ID, Benutzername und Rolle; 20 Einträge pro Seite.",
+        "📊 Benutzer-Seite: Statistik-Karten zeigen Gesamtanzahl, aktive und inaktive Benutzer.",
+        "➕ Benutzer-Seite: Dialog zum Erstellen neuer Benutzer (Benutzername, Passwort, Rolle, Status).",
+        "✏️ Benutzer-Seite: Dialog zum Bearbeiten von Benutzer-Details mit Schutz vor Selbst-Änderungen.",
+        "🔑 Benutzer-Seite: Dialog zum Zurücksetzen von Passwörtern durch Admins (ohne alte Passwort-Anfrage).",
+        "❌ Benutzer-Seite: Dialog zum Löschen von Benutzern (nur für Superadmins; verhindert Selbst-Löschung).",
+        "📋 Benutzer-Seite: Details-Modal zeigt Audit-Informationen (letzte Anmeldung, Passwort-Änderung, Abmeldungen).",
+        "🎨 Benutzer-Seite: Rollen-Abzeichen mit Farb-Kodierung (Benutzer: grau, Editor: blau, Admin: grün, Superadmin: rot).",
+        "🔒 Header-Menü: Neue 'Passwort ändern'-Option im Benutzer-Dropdown für Selbstbedienung (alle Benutzer).",
+        "🔐 Passwort-Dialog: Authentifizierung mit aktuellem Passwort erforderlich (min. 6 Zeichen für neues Passwort).",
+        "🎯 Rollenbasiert: Menu-Einträge werden basierend auf Benutzer-Rolle gefiltert (z.B. 'Benutzer' nur für Admin+)."
+      ]
+    },
+    {
+      "version": "2025.1.0-alpha.12",
+      "date": "2025-11-27",
+      "changes": [
+        "✨ Dashboard: Komplett überarbeitetes Dashboard mit Karten-Design für alle Raumgruppen.",
+        "📊 Dashboard: Globale Statistik-Übersicht zeigt Gesamt-Infoscreens, Online/Offline-Anzahl und Warnungen.",
+        "🔍 Dashboard: Filter-Buttons (Alle, Online, Offline, Warnungen) mit dynamischen Zählern.",
+        "🎯 Dashboard: Anzeige des aktuell laufenden Events pro Gruppe (Titel, Typ, Datum, Uhrzeit in lokaler Zeitzone).",
+        "📈 Dashboard: Farbcodierte Health-Bars zeigen Online/Offline-Verhältnis je Gruppe.",
+        "👥 Dashboard: Ausklappbare Client-Details mit 'Zeit seit letztem Lebenszeichen' (z.B. 'vor 5 Min.').",
+        "🔄 Dashboard: Sammel-Neustart-Funktion für alle offline Clients einer Gruppe.",
+        "⏱️ Dashboard: Auto-Aktualisierung alle 15 Sekunden; manueller Aktualisierungs-Button verfügbar."
+      ]
+    },
+    {
+      "version": "2025.1.0-alpha.11",
+      "date": "2025-11-05",
+      "changes": [
+        "🎬 Client: Clients können jetzt Video-Events aus dem Terminplaner abspielen (Streaming mit Seek via Byte-Range).",
+        "🧭 Einstellungen: Neues verschachteltes Tab-Layout mit kontrollierter Tab-Auswahl (keine Sprünge in Unter-Tabs).",
+        "📅 Einstellungen › Akademischer Kalender: ‘Schulferien Import’ und ‘Liste’ zusammengeführt in ‘📥 Import & Liste’.",
+        "🗓️ Events-Modal: Video-Optionen erweitert (Autoplay, Loop, Lautstärke, Ton aus). Werte werden bei neuen Terminen aus System-Defaults initialisiert.",
+        "⚙️ Einstellungen › Events › Videos: Globale Defaults für Autoplay, Loop, Lautstärke und Mute (Keys: video_autoplay, video_loop, video_volume, video_muted)."
       ]
     },
     {
       "version": "2025.1.0-alpha.10",
-      "date": "2025-10-15",
+      "date": "2025-10-25",
       "changes": [
-        "🔐 Auth: Login und Benutzerverwaltung implementiert (rollenbasiert, persistente Sitzungen).",
-        "✨ UI: Benutzer-Menü oben rechts – DropDownButton mit Benutzername/Rolle; Einträge: ‘Profil’ und ‘Abmelden’.",
-        "🧩 Frontend: Syncfusion SplitButtons integriert (react-splitbuttons) und Vite-Konfiguration für Pre-Bundling ergänzt.",
-        "🐛 Fix: Import-Fehler ‘@syncfusion/ej2-react-splitbuttons’ – Anleitung in README hinzugefügt (optimizeDeps + Volume-Reset)."
+        "🎬 Client: Client kann jetzt Videos wiedergeben (Playback/UI surface) — Benutzerseitige Präsentation wurde ergänzt.",
+        "🧩 UI: Event-Modal ergänzt um Video-Auswahl und Wiedergabe-Optionen (Autoplay, Loop, Lautstärke).",
+        "📁 Medien-UI: FileManager erlaubt größere Uploads für Full-HD-Videos; Client-seitige Validierung begrenzt Videolänge auf 10 Minuten."
       ]
     },
     {
       "version": "2025.1.0-alpha.9",
-      "date": "2025-10-14",
+      "date": "2025-10-19",
       "changes": [
-        "✨ UI: Einheitlicher Lösch-Workflow für Termine – alle Typen (Einzeltermin, Einzelinstanz, ganze Serie) werden mit eigenen, benutzerfreundlichen Dialogen behandelt.",
-        "🔧 Frontend: Syncfusion-RecurrenceAlert und DeleteAlert werden abgefangen und durch eigene Dialoge ersetzt (inkl. finale Bestätigung für Serienlöschung).",
-        "✅ Bugfix: Keine doppelten oder verwirrenden Bestätigungsdialoge mehr beim Löschen von Serienterminen.",
-        "📖 Doku: README und Copilot-Instructions um Lösch-Workflow und Dialoghandling erweitert."
+        "🆕 Events: Darstellung für ‘WebUntis’ harmonisiert mit ‘Website’ (UI/representation).",
+        "🛠️ Einstellungen › Events: WebUntis verwendet jetzt die bestehende Supplement-Table-Einstellung (Settings UI updated)."
       ]
     },
     {
       "version": "2025.1.0-alpha.8",
-      "date": "2025-10-11",
+      "date": "2025-10-18",
       "changes": [
-        "🎨 Theme: Umstellung auf Syncfusion Material 3; zentrale CSS-Imports in main.tsx",
-        "🧹 Cleanup: Tailwind CSS komplett entfernt (Pakete, PostCSS, Stylelint, Konfigurationsdateien)",
-        "🧩 Gruppenverwaltung: \"infoscreen_groups\" auf Syncfusion-Komponenten (Buttons, Dialoge, DropDownList, TextBox) umgestellt; Abstände verbessert",
-        "🔔 Benachrichtigungen: Vereinheitlichte Toast-/Dialog-Texte; letzte Alert-Verwendung ersetzt",
-        "📖 Doku: README und Copilot-Anweisungen angepasst (Material 3, zentrale Styles, kein Tailwind)"
+        "✨ Einstellungen › Events › Präsentationen: Neue UI-Felder für Slide-Show Intervall, Page-Progress und Auto-Progress.",
+        "️ UI: Event-Modal lädt Präsentations-Einstellungen aus Global-Defaults bzw. Event-Daten (behaviour surfaced in UI)."
       ]
     },
     {
       "version": "2025.1.0-alpha.7",
-      "date": "2025-09-21",
+      "date": "2025-10-16",
       "changes": [
-        "🧭 UI: Periode-Auswahl (Syncfusion) neben Gruppenauswahl; kompaktes Layout",
-        "✅ Anzeige: Abzeichen für vorhandenen Ferienplan + Zähler ‘Ferien im Blick’",
-        "🛠️ API: Endpunkte für akademische Perioden (list, active GET/POST, for_date)",
-        "📅 Scheduler: Standardmäßig keine Terminierung in Ferien; Block-Darstellung wie Ganztagesereignis; schwarze Textfarbe",
-        "📤 Ferien: Upload von TXT/CSV (headless TXT nutzt Spalten 2–4)",
-        "🔧 UX: Schalter in einer Reihe; Dropdown-Breiten optimiert"
+        "✨ Einstellungen-Seite: Neues Tab-Layout (Syncfusion) mit rollenbasierter Sichtbarkeit.",
+        "🗓️ Einstellungen › Events: WebUntis/Vertretungsplan in Events-Tab (enable/preview in UI).",
+        "📅 UI: Akademische Periode kann in der Einstellungen-Seite direkt gesetzt werden."
       ]
     },
     {
       "version": "2025.1.0-alpha.6",
-      "date": "2025-09-20",
+      "date": "2025-10-15",
       "changes": [
-        "🗓️ NEU: Akademische Perioden System - Unterstützung für Schuljahre, Semester und Trimester",
-        "🏗️ DATENBANK: Neue 'academic_periods' Tabelle für zeitbasierte Organisation",
-        "🔗 ERWEITERT: Events und Medien können jetzt optional einer akademischen Periode zugeordnet werden",
-        "📊 ARCHITEKTUR: Vollständig rückwärtskompatible Implementierung für schrittweise Einführung",
-        "🎯 BILDUNG: Fokus auf Schulumgebung mit Erweiterbarkeit für Hochschulen",
-        "⚙️ TOOLS: Automatische Erstellung von Standard-Schuljahren für österreichische Schulen"
+        "✨ UI: Benutzer-Menü (top-right) mit Name/Rolle und Einträgen 'Profil' und 'Abmelden'."
       ]
     },
     {
       "version": "2025.1.0-alpha.5",
-      "date": "2025-09-14",
+      "date": "2025-10-14",
       "changes": [
-        "Komplettes Redesign des Backend-Handlings der Gruppenzuordnungen von neuen Clients und der Schritte bei Änderung der Gruppenzuordnung."
+        "✨ UI: Einheitlicher Lösch-Workflow für Termine mit benutzerfreundlichen Dialogen (Einzeltermin, Einzelinstanz, Serie).",
+        "🔧 Frontend: RecurrenceAlert/DeleteAlert werden abgefangen und durch eigene Dialoge ersetzt (Verbesserung der UX).",
+        "✅ Bugfix (UX): Keine doppelten oder verwirrenden Bestätigungsdialoge mehr beim Löschen von Serienterminen."
       ]
     },
     {
       "version": "2025.1.0-alpha.4",
-      "date": "2025-09-01",
+      "date": "2025-10-11",
       "changes": [
-        "Grundstruktur für Deployment getestet und optimiert.",
-        "FIX: Programmfehler beim Umschalten der Ansicht auf der Medien-Seite behoben."
+        "🎨 Theme: Umstellung auf Syncfusion Material 3; zentrale CSS-Imports (UI theme update).",
+        "🧩 UI: Gruppenverwaltung ('infoscreen_groups') auf Syncfusion-Komponenten umgestellt.",
+        "🔔 UI: Vereinheitlichte Notifications / Toast-Texte für konsistente UX."
       ]
     },
     {
       "version": "2025.1.0-alpha.3",
-      "date": "2025-08-30",
+      "date": "2025-09-21",
       "changes": [
-        "NEU: Programminfo-Seite mit dynamischen Daten, Build-Infos und Changelog.",
-        "NEU: Logout-Funktionalität implementiert.",
-        "FIX: Breite der Sidebar im eingeklappten Zustand korrigiert."
+        "🧭 UI: Periode-Auswahl (Syncfusion) neben Gruppenauswahl; kompakte Layout-Verbesserung.",
+        "✅ Anzeige: Abzeichen für vorhandenen Ferienplan + 'Ferien im Blick' Zähler (UI indicator).",
+        "📤 UI: Ferien-Upload (TXT/CSV) Benutzer-Workflow ergänzt."
       ]
     },
     {
       "version": "2025.1.0-alpha.2",
-      "date": "2025-08-29",
+      "date": "2025-09-01",
       "changes": [
-        "INFO: Analyse und Anzeige der verwendeten Open-Source-Bibliotheken."
+        "UI Fix: Fehler beim Umschalten der Ansicht auf der Medien-Seite behoben."
       ]
     },
     {
       "version": "2025.1.0-alpha.1",
-      "date": "2025-08-28",
+      "date": "2025-08-30",
       "changes": [
-        "Initiales Setup des Projekts und der Grundstruktur."
+        "🆕 UI: Programminfo-Seite mit dynamischen Daten, Build-Infos und Changelog.",
+        "✨ UI: Logout-Funktionalität (Frontend) implementiert.",
+        "🐛 UI Fix: Breite der Sidebar im eingeklappten Zustand korrigiert."
       ]
     }
   ]

dashboard/src/App.tsx

@@ -4,7 +4,8 @@ import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
 import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
 import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
 import type { MenuEventArgs } from '@syncfusion/ej2-splitbuttons';
-import { TooltipComponent } from '@syncfusion/ej2-react-popups';
+import { TooltipComponent, DialogComponent } from '@syncfusion/ej2-react-popups';
+import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
 import logo from './assets/logo.png';
 import './App.css';
 
@@ -25,16 +26,16 @@ import {
 import { ToastProvider } from './components/ToastProvider';
 
 const sidebarItems = [
-  { name: 'Dashboard', path: '/', icon: LayoutDashboard },
-  { name: 'Termine', path: '/termine', icon: Calendar },
-  { name: 'Ressourcen', path: '/ressourcen', icon: Boxes },
-  { name: 'Raumgruppen', path: '/infoscr_groups', icon: MonitorDotIcon },
-  { name: 'Infoscreen-Clients', path: '/clients', icon: Monitor },
-  { name: 'Erweiterungsmodus', path: '/setup', icon: Wrench },
-  { name: 'Medien', path: '/medien', icon: Image },
-  { name: 'Benutzer', path: '/benutzer', icon: User },
-  { name: 'Einstellungen', path: '/einstellungen', icon: Settings },
-  { name: 'Programminfo', path: '/programminfo', icon: Info },
+  { name: 'Dashboard', path: '/', icon: LayoutDashboard, minRole: 'user' },
+  { name: 'Termine', path: '/termine', icon: Calendar, minRole: 'user' },
+  { name: 'Ressourcen', path: '/ressourcen', icon: Boxes, minRole: 'editor' },
+  { name: 'Raumgruppen', path: '/infoscr_groups', icon: MonitorDotIcon, minRole: 'admin' },
+  { name: 'Infoscreen-Clients', path: '/clients', icon: Monitor, minRole: 'admin' },
+  { name: 'Erweiterungsmodus', path: '/setup', icon: Wrench, minRole: 'admin' },
+  { name: 'Medien', path: '/medien', icon: Image, minRole: 'editor' },
+  { name: 'Benutzer', path: '/benutzer', icon: User, minRole: 'admin' },
+  { name: 'Einstellungen', path: '/einstellungen', icon: Settings, minRole: 'admin' },
+  { name: 'Programminfo', path: '/programminfo', icon: Info, minRole: 'user' },
 ];
 
 // Dummy Components (können in eigene Dateien ausgelagert werden)
@@ -51,6 +52,8 @@ import Programminfo from './programminfo';
 import Logout from './logout';
 import Login from './login';
 import { useAuth } from './useAuth';
+import { changePassword } from './apiAuth';
+import { useToast } from './components/ToastProvider';
 
 // ENV aus .env holen (Platzhalter, im echten Projekt über process.env oder API)
 // const ENV = import.meta.env.VITE_ENV || 'development';
@@ -58,10 +61,19 @@ import { useAuth } from './useAuth';
 const Layout: React.FC = () => {
   const [version, setVersion] = useState('');
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const [organizationName, setOrganizationName] = useState('');
   let sidebarRef: SidebarComponent | null;
   const { user } = useAuth();
+  const toast = useToast();
   const navigate = useNavigate();
 
+  // Change password dialog state
+  const [showPwdDialog, setShowPwdDialog] = useState(false);
+  const [pwdCurrent, setPwdCurrent] = useState('');
+  const [pwdNew, setPwdNew] = useState('');
+  const [pwdConfirm, setPwdConfirm] = useState('');
+  const [pwdBusy, setPwdBusy] = useState(false);
+
   React.useEffect(() => {
     fetch('/program-info.json')
       .then(res => res.json())
@@ -69,6 +81,25 @@ const Layout: React.FC = () => {
       .catch(err => console.error('Failed to load version info:', err));
   }, []);
 
+  // Load organization name
+  React.useEffect(() => {
+    const loadOrgName = async () => {
+      try {
+        const { getOrganizationName } = await import('./apiSystemSettings');
+        const data = await getOrganizationName();
+        setOrganizationName(data.name || '');
+      } catch (err) {
+        console.error('Failed to load organization name:', err);
+      }
+    };
+    loadOrgName();
+    
+    // Listen for organization name updates from Settings page
+    const handleUpdate = () => loadOrgName();
+    window.addEventListener('organizationNameUpdated', handleUpdate);
+    return () => window.removeEventListener('organizationNameUpdated', handleUpdate);
+  }, []);
+
   const toggleSidebar = () => {
     if (sidebarRef) {
       sidebarRef.toggle();
@@ -87,6 +118,33 @@ const Layout: React.FC = () => {
     }
   };
 
+  const submitPasswordChange = async () => {
+    if (!pwdCurrent || !pwdNew || !pwdConfirm) {
+      toast.show({ content: 'Bitte alle Felder ausfüllen', cssClass: 'e-toast-warning' });
+      return;
+    }
+    if (pwdNew.length < 6) {
+      toast.show({ content: 'Neues Passwort muss mindestens 6 Zeichen haben', cssClass: 'e-toast-warning' });
+      return;
+    }
+    if (pwdNew !== pwdConfirm) {
+      toast.show({ content: 'Passwörter stimmen nicht überein', cssClass: 'e-toast-warning' });
+      return;
+    }
+
+    setPwdBusy(true);
+    try {
+      await changePassword(pwdCurrent, pwdNew);
+      toast.show({ content: 'Passwort erfolgreich geändert', cssClass: 'e-toast-success' });
+      setShowPwdDialog(false);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : 'Fehler beim Ändern des Passworts';
+      toast.show({ content: msg, cssClass: 'e-toast-danger' });
+    } finally {
+      setPwdBusy(false);
+    }
+  };
+
   const sidebarTemplate = () => (
     <div
       className={`sidebar-theme ${isCollapsed ? 'collapsed' : 'expanded'}`}
@@ -132,7 +190,16 @@ const Layout: React.FC = () => {
           minHeight: 0, // Wichtig für Flex-Shrinking
         }}
       >
-        {sidebarItems.map(item => {
+        {sidebarItems
+          .filter(item => {
+            // Only show items the current user is allowed to see
+            if (!user) return false;
+            const roleHierarchy = ['user', 'editor', 'admin', 'superadmin'];
+            const userRoleIndex = roleHierarchy.indexOf(user.role);
+            const itemRoleIndex = roleHierarchy.indexOf(item.minRole || 'user');
+            return userRoleIndex >= itemRoleIndex;
+          })
+          .map(item => {
           const Icon = item.icon;
           const linkContent = (
             <Link
@@ -299,19 +366,24 @@ const Layout: React.FC = () => {
             Infoscreen-Management
           </span>
           <div style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 16 }}>
-            <span className="text-lg font-medium" style={{ color: '#78591c' }}>
-              [Organisationsname]
-            </span>
+            {organizationName && (
+              <span className="text-lg font-medium" style={{ color: '#78591c' }}>
+                {organizationName}
+              </span>
+            )}
             {user && (
               <DropDownButtonComponent
                 items={[
-                  { text: 'Profil', id: 'profile', iconCss: 'e-icons e-user' },
+                  { text: 'Passwort ändern', id: 'change-password', iconCss: 'e-icons e-lock' },
                   { separator: true },
                   { text: 'Abmelden', id: 'logout', iconCss: 'e-icons e-logout' },
                 ]}
                 select={(args: MenuEventArgs) => {
-                  if (args.item.id === 'profile') {
-                    navigate('/benutzer');
+                  if (args.item.id === 'change-password') {
+                    setPwdCurrent('');
+                    setPwdNew('');
+                    setPwdConfirm('');
+                    setShowPwdDialog(true);
                   } else if (args.item.id === 'logout') {
                     navigate('/logout');
                   }
@@ -339,6 +411,57 @@ const Layout: React.FC = () => {
             )}
           </div>
         </header>
+        <DialogComponent
+          isModal={true}
+          visible={showPwdDialog}
+          width="480px"
+          header="Passwort ändern"
+          showCloseIcon={true}
+          close={() => setShowPwdDialog(false)}
+          footerTemplate={() => (
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+              <ButtonComponent cssClass="e-flat" onClick={() => setShowPwdDialog(false)} disabled={pwdBusy}>
+                Abbrechen
+              </ButtonComponent>
+              <ButtonComponent cssClass="e-primary" onClick={submitPasswordChange} disabled={pwdBusy}>
+                {pwdBusy ? 'Speichere...' : 'Speichern'}
+              </ButtonComponent>
+            </div>
+          )}
+        >
+          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <div>
+              <label style={{ display: 'block', marginBottom: 6, fontWeight: 500 }}>Aktuelles Passwort *</label>
+              <TextBoxComponent
+                type="password"
+                placeholder="Aktuelles Passwort"
+                value={pwdCurrent}
+                input={(e: any) => setPwdCurrent(e.value)}
+                disabled={pwdBusy}
+              />
+            </div>
+            <div>
+              <label style={{ display: 'block', marginBottom: 6, fontWeight: 500 }}>Neues Passwort *</label>
+              <TextBoxComponent
+                type="password"
+                placeholder="Mindestens 6 Zeichen"
+                value={pwdNew}
+                input={(e: any) => setPwdNew(e.value)}
+                disabled={pwdBusy}
+              />
+            </div>
+            <div>
+              <label style={{ display: 'block', marginBottom: 6, fontWeight: 500 }}>Neues Passwort bestätigen *</label>
+              <TextBoxComponent
+                type="password"
+                placeholder="Wiederholen"
+                value={pwdConfirm}
+                input={(e: any) => setPwdConfirm(e.value)}
+                disabled={pwdBusy}
+              />
+            </div>
+          </div>
+        </DialogComponent>
         <main className="page-content">
           <Outlet />
         </main>

dashboard/src/apiAuth.ts

@@ -31,6 +31,26 @@ export interface AuthCheckResponse {
   role?: string;
 }
 
+/**
+ * Change password for the currently authenticated user.
+ */
+export async function changePassword(currentPassword: string, newPassword: string): Promise<{ message: string }> {
+  const res = await fetch('/api/auth/change-password', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ current_password: currentPassword, new_password: newPassword }),
+  });
+
+  const data = await res.json();
+
+  if (!res.ok) {
+    throw new Error(data.error || 'Failed to change password');
+  }
+
+  return data as { message: string };
+}
+
 /**
  * Authenticate a user with username and password.
  * 

dashboard/src/apiSystemSettings.ts

@@ -106,3 +106,63 @@ export async function updateSupplementTableSettings(
   }
   return response.json();
 }
+
+/**
+ * Get holiday banner setting
+ */
+export async function getHolidayBannerSetting(): Promise<{ enabled: boolean }> {
+  const response = await fetch(`/api/system-settings/holiday-banner`, {
+    credentials: 'include',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch holiday banner setting: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+/**
+ * Update holiday banner setting
+ */
+export async function updateHolidayBannerSetting(
+  enabled: boolean
+): Promise<{ enabled: boolean; message: string }> {
+  const response = await fetch(`/api/system-settings/holiday-banner`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ enabled }),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to update holiday banner setting: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+/**
+ * Get organization name (public endpoint)
+ */
+export async function getOrganizationName(): Promise<{ name: string }> {
+  const response = await fetch(`/api/system-settings/organization-name`, {
+    credentials: 'include',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch organization name: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+/**
+ * Update organization name (superadmin only)
+ */
+export async function updateOrganizationName(name: string): Promise<{ name: string; message: string }> {
+  const response = await fetch(`/api/system-settings/organization-name`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ name }),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to update organization name: ${response.statusText}`);
+  }
+  return response.json();
+}

dashboard/src/apiUsers.ts

@@ -0,0 +1,161 @@
+/**
+ * User management API client.
+ * 
+ * Provides functions to manage users (CRUD operations).
+ * Access is role-based: admin can manage user/editor/admin, superadmin can manage all.
+ */
+
+export interface UserData {
+  id: number;
+  username: string;
+  role: 'user' | 'editor' | 'admin' | 'superadmin';
+  isActive: boolean;
+  lastLoginAt?: string;
+  lastPasswordChangeAt?: string;
+  lastFailedLoginAt?: string;
+  failedLoginAttempts?: number;
+  lockedUntil?: string;
+  deactivatedAt?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface CreateUserRequest {
+  username: string;
+  password: string;
+  role: 'user' | 'editor' | 'admin' | 'superadmin';
+  isActive?: boolean;
+}
+
+export interface UpdateUserRequest {
+  username?: string;
+  role?: 'user' | 'editor' | 'admin' | 'superadmin';
+  isActive?: boolean;
+}
+
+export interface ResetPasswordRequest {
+  password: string;
+}
+
+/**
+ * List all users (filtered by current user's role).
+ * Admin sees: user, editor, admin
+ * Superadmin sees: all including superadmin
+ */
+export async function listUsers(): Promise<UserData[]> {
+  const res = await fetch('/api/users', {
+    method: 'GET',
+    credentials: 'include',
+  });
+  
+  if (!res.ok) {
+    const data = await res.json();
+    throw new Error(data.error || 'Failed to fetch users');
+  }
+  
+  return res.json();
+}
+
+/**
+ * Get a single user by ID.
+ */
+export async function getUser(userId: number): Promise<UserData> {
+  const res = await fetch(`/api/users/${userId}`, {
+    method: 'GET',
+    credentials: 'include',
+  });
+  
+  if (!res.ok) {
+    const data = await res.json();
+    throw new Error(data.error || 'Failed to fetch user');
+  }
+  
+  return res.json();
+}
+
+/**
+ * Create a new user.
+ * Admin: can create user, editor, admin
+ * Superadmin: can create any role including superadmin
+ */
+export async function createUser(userData: CreateUserRequest): Promise<UserData & { message: string }> {
+  const res = await fetch('/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify(userData),
+  });
+  
+  const data = await res.json();
+  
+  if (!res.ok) {
+    throw new Error(data.error || 'Failed to create user');
+  }
+  
+  return data;
+}
+
+/**
+ * Update a user's details.
+ * Restrictions:
+ * - Cannot change own role
+ * - Cannot change own active status
+ * - Admin cannot edit superadmin users
+ */
+export async function updateUser(userId: number, userData: UpdateUserRequest): Promise<UserData & { message: string }> {
+  const res = await fetch(`/api/users/${userId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify(userData),
+  });
+  
+  const data = await res.json();
+  
+  if (!res.ok) {
+    throw new Error(data.error || 'Failed to update user');
+  }
+  
+  return data;
+}
+
+/**
+ * Reset a user's password.
+ * Admin: cannot reset superadmin passwords
+ * Superadmin: can reset any password
+ */
+export async function resetUserPassword(userId: number, password: string): Promise<{ message: string }> {
+  const res = await fetch(`/api/users/${userId}/password`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ password }),
+  });
+  
+  const data = await res.json();
+  
+  if (!res.ok) {
+    throw new Error(data.error || 'Failed to reset password');
+  }
+  
+  return data;
+}
+
+/**
+ * Permanently delete a user (superadmin only).
+ * Cannot delete own account.
+ */
+export async function deleteUser(userId: number): Promise<{ message: string }> {
+  const res = await fetch(`/api/users/${userId}`, {
+    method: 'DELETE',
+    credentials: 'include',
+  });
+  
+  const data = await res.json();
+  
+  if (!res.ok) {
+    throw new Error(data.error || 'Failed to delete user');
+  }
+  
+  return data;
+}

dashboard/src/appointments.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   ScheduleComponent,
   Day,
@@ -63,7 +63,14 @@ type Event = {
   isHoliday?: boolean; // marker for styling/logic
   MediaId?: string | number;
   SlideshowInterval?: number;
+  PageProgress?: boolean;
+  AutoProgress?: boolean;
   WebsiteUrl?: string;
+  // Video-specific fields
+  Autoplay?: boolean;
+  Loop?: boolean;
+  Volume?: number;
+  Muted?: boolean;
   Icon?: string; // <--- Icon ergänzen!
   Type?: string; // <--- Typ ergänzen, falls benötigt
   OccurrenceOfId?: string; // Serieninstanz
@@ -191,6 +198,17 @@ const Appointments: React.FC = () => {
   const [hasSchoolYearPlan, setHasSchoolYearPlan] = React.useState<boolean>(false);
   const [periods, setPeriods] = React.useState<{ id: number; label: string }[]>([]);
   const [activePeriodId, setActivePeriodId] = React.useState<number | null>(null);
+  const getWeekMonday = (date: Date): Date => {
+    const d = new Date(date);
+    const day = d.getDay();
+    const diffToMonday = (day + 6) % 7; // Monday = 0
+    d.setDate(d.getDate() - diffToMonday);
+    d.setHours(12, 0, 0, 0); // use noon to avoid TZ shifting back a day
+    return d;
+  };
+
+  const [selectedDate, setSelectedDate] = useState<Date>(() => getWeekMonday(new Date()));
+  const navigationSynced = useRef(false);
   
   
   // Confirmation dialog state
@@ -362,11 +380,11 @@ const Appointments: React.FC = () => {
       const expandedEvents: Event[] = [];
       
       for (const e of data) {
-          if (e.RecurrenceRule) {
+          if (e.recurrenceRule) {
           // Parse EXDATE list
           const exdates = new Set<string>();
-          if (e.RecurrenceException) {
-            e.RecurrenceException.split(',').forEach((dateStr: string) => {
+          if (e.recurrenceException) {
+            e.recurrenceException.split(',').forEach((dateStr: string) => {
               const trimmed = dateStr.trim();
               exdates.add(trimmed);
             });
@@ -374,37 +392,53 @@ const Appointments: React.FC = () => {
           
           // Let Syncfusion handle ALL recurrence patterns natively for proper badge display
           expandedEvents.push({
-            Id: e.Id,
-            Subject: e.Subject,
-            StartTime: parseEventDate(e.StartTime),
-            EndTime: parseEventDate(e.EndTime),
-            IsAllDay: e.IsAllDay,
-            MediaId: e.MediaId,
-            Icon: e.Icon,
-            Type: e.Type,
-            OccurrenceOfId: e.OccurrenceOfId,
+            Id: e.id,
+            Subject: e.subject,
+            StartTime: parseEventDate(e.startTime),
+            EndTime: parseEventDate(e.endTime),
+            IsAllDay: e.isAllDay,
+            MediaId: e.mediaId,
+            SlideshowInterval: e.slideshowInterval,
+            PageProgress: e.pageProgress,
+            AutoProgress: e.autoProgress,
+            WebsiteUrl: e.websiteUrl,
+            Autoplay: e.autoplay,
+            Loop: e.loop,
+            Volume: e.volume,
+            Muted: e.muted,
+            Icon: e.icon,
+            Type: e.type,
+            OccurrenceOfId: e.occurrenceOfId,
             Recurrence: true,
-            RecurrenceRule: e.RecurrenceRule,
-            RecurrenceEnd: e.RecurrenceEnd ?? null,
-            SkipHolidays: e.SkipHolidays ?? false,
-            RecurrenceException: e.RecurrenceException || undefined,
+            RecurrenceRule: e.recurrenceRule,
+            RecurrenceEnd: e.recurrenceEnd ?? null,
+            SkipHolidays: e.skipHolidays ?? false,
+            RecurrenceException: e.recurrenceException || undefined,
           });
         } else {
           // Non-recurring event - add as-is
           expandedEvents.push({
-            Id: e.Id,
-            Subject: e.Subject,
-            StartTime: parseEventDate(e.StartTime),
-            EndTime: parseEventDate(e.EndTime),
-            IsAllDay: e.IsAllDay,
-            MediaId: e.MediaId,
-            Icon: e.Icon,
-            Type: e.Type,
-            OccurrenceOfId: e.OccurrenceOfId,
+            Id: e.id,
+            Subject: e.subject,
+            StartTime: parseEventDate(e.startTime),
+            EndTime: parseEventDate(e.endTime),
+            IsAllDay: e.isAllDay,
+            MediaId: e.mediaId,
+            SlideshowInterval: e.slideshowInterval,
+            PageProgress: e.pageProgress,
+            AutoProgress: e.autoProgress,
+            WebsiteUrl: e.websiteUrl,
+            Autoplay: e.autoplay,
+            Loop: e.loop,
+            Volume: e.volume,
+            Muted: e.muted,
+            Icon: e.icon,
+            Type: e.type,
+            OccurrenceOfId: e.occurrenceOfId,
             Recurrence: false,
             RecurrenceRule: null,
             RecurrenceEnd: null,
-            SkipHolidays: e.SkipHolidays ?? false,
+            SkipHolidays: e.skipHolidays ?? false,
             RecurrenceException: undefined,
           });
         }
@@ -489,7 +523,7 @@ const Appointments: React.FC = () => {
   }, [holidays, allowScheduleOnHolidays]);
 
   const dataSource = useMemo(() => {
-    // Filter: Events with SkipHolidays=true are never shown on holidays, regardless of toggle
+    // Filter: Events with SkipHolidays=true (from internal Event type) are never shown on holidays
     const filteredEvents = events.filter(ev => {
       if (ev.SkipHolidays) {
         // If event falls within a holiday, hide it
@@ -658,6 +692,7 @@ const Appointments: React.FC = () => {
           change={async (e: { value: number }) => {
             const id = Number(e.value);
             if (!id) return;
+            if (activePeriodId === id) return; // avoid firing on initial mount
             try {
               const updated = await setActiveAcademicPeriod(id);
               setActivePeriodId(updated.id);
@@ -669,6 +704,7 @@ const Appointments: React.FC = () => {
                 scheduleRef.current.selectedDate = target;
                 scheduleRef.current.dataBind?.();
               }
+              setSelectedDate(target);
               updateHolidaysInView();
             } catch (err) {
               console.error('Aktive Periode setzen fehlgeschlagen:', err);
@@ -791,8 +827,6 @@ const Appointments: React.FC = () => {
           
           // The CustomEventModal already handled the API calls internally
           // For now, just refresh the data (the recurring event logic is handled in the modal itself)
-          console.log('Modal operation completed, refreshing data');
-          
           setModalOpen(false);
           setEditMode(false);
           
@@ -803,21 +837,28 @@ const Appointments: React.FC = () => {
           setTimeout(() => {
             scheduleRef.current?.refreshEvents?.();
           }, 0);
-          
-          console.log('Modal save cycle completed - data refreshed');
         }}
         initialData={modalInitialData}
         groupName={groups.find(g => g.id === selectedGroupId) ?? { id: selectedGroupId, name: '' }}
         groupColor={selectedGroupId ? getGroupColor(selectedGroupId, groups) : undefined}
         editMode={editMode} // NEU: Prop für Editiermodus
-        blockHolidays={!allowScheduleOnHolidays}
-        isHolidayRange={(s, e) => isWithinHolidayRange(s, e)}
       />
       <ScheduleComponent
+        key={`scheduler-${selectedDate.toISOString().slice(0, 10)}`}
         ref={scheduleRef}
         height="750px"
         locale="de"
         currentView="Week"
+        firstDayOfWeek={1}
+        enablePersistence={false}
+        selectedDate={selectedDate}
+        created={() => {
+          const inst = scheduleRef.current;
+          if (inst && selectedDate) {
+            inst.selectedDate = selectedDate;
+            inst.dataBind?.();
+          }
+        }}
         eventSettings={{
           dataSource: dataSource,
           fields: {
@@ -836,6 +877,17 @@ const Appointments: React.FC = () => {
           updateHolidaysInView();
           // Bei Navigation oder Viewwechsel Events erneut laden (für Range-basierte Expansion)
           if (args && (args.requestType === 'dateNavigate' || args.requestType === 'viewNavigate')) {
+            if (!navigationSynced.current) {
+              navigationSynced.current = true;
+              if (scheduleRef.current && selectedDate) {
+                scheduleRef.current.selectedDate = selectedDate;
+                scheduleRef.current.dataBind?.();
+              }
+              return;
+            }
+            if (scheduleRef.current?.selectedDate) {
+              setSelectedDate(new Date(scheduleRef.current.selectedDate));
+            }
             fetchAndSetEvents();
             return;
           }
@@ -891,10 +943,10 @@ const Appointments: React.FC = () => {
               let isMasterRecurring = false;
               try {
                 masterEvent = await fetchEventById(eventId);
-                isMasterRecurring = !!masterEvent.RecurrenceRule;
+                isMasterRecurring = !!masterEvent.recurrenceRule;
                 console.log('Master event info:', {
-                  masterRecurrenceRule: masterEvent.RecurrenceRule,
-                  masterStartTime: masterEvent.StartTime,
+                  masterRecurrenceRule: masterEvent.recurrenceRule,
+                  masterStartTime: masterEvent.startTime,
                   isMasterRecurring
                 });
               } catch (err) {
@@ -1160,7 +1212,13 @@ const Appointments: React.FC = () => {
               skipHolidays: isSingleOccurrence ? false : (eventDataToUse.SkipHolidays ?? false),
               media,
               slideshowInterval: eventDataToUse.SlideshowInterval ?? 10,
+              pageProgress: eventDataToUse.PageProgress ?? true,
+              autoProgress: eventDataToUse.AutoProgress ?? true,
               websiteUrl: eventDataToUse.WebsiteUrl ?? '',
+              autoplay: eventDataToUse.Autoplay ?? true,
+              loop: eventDataToUse.Loop ?? true,
+              volume: eventDataToUse.Volume ?? 0.8,
+              muted: eventDataToUse.Muted ?? false,
             };
             
             setModalInitialData(modalData);
@@ -1257,7 +1315,6 @@ const Appointments: React.FC = () => {
             }
           }
         }}
-        firstDayOfWeek={1}
         renderCell={(args: RenderCellEventArgs) => {
           // Nur für Arbeitszellen (Stunden-/Tageszellen)
           if (args.elementType === 'workCells') {

dashboard/src/components/CustomEventModal.tsx

@@ -19,9 +19,16 @@ type CustomEventData = {
   weekdays: number[];
   repeatUntil: Date | null;
   skipHolidays: boolean;
-  media?: { id: string; path: string; name: string } | null; // <--- ergänzt
-  slideshowInterval?: number; // <--- ergänzt
-  websiteUrl?: string; // <--- ergänzt
+  media?: { id: string; path: string; name: string } | null;
+  slideshowInterval?: number;
+  pageProgress?: boolean;
+  autoProgress?: boolean;
+  websiteUrl?: string;
+  // Video-specific fields
+  autoplay?: boolean;
+  loop?: boolean;
+  volume?: number;
+  muted?: boolean;
 };
 
 // Typ für initialData erweitern, damit Id unterstützt wird
@@ -38,8 +45,7 @@ type CustomEventModalProps = {
   groupName: string | { id: string | null; name: string };
   groupColor?: string;
   editMode?: boolean;
-  blockHolidays?: boolean;
-  isHolidayRange?: (start: Date, end: Date) => boolean;
+  // Removed unused blockHolidays and isHolidayRange
 };
 
 const weekdayOptions = [
@@ -68,8 +74,6 @@ const CustomEventModal: React.FC<CustomEventModalProps> = ({
   groupName,
   groupColor,
   editMode,
-  blockHolidays,
-  isHolidayRange,
 }) => {
   const [title, setTitle] = React.useState(initialData.title || '');
   const [startDate, setStartDate] = React.useState(initialData.startDate || null);
@@ -98,12 +102,66 @@ const CustomEventModal: React.FC<CustomEventModalProps> = ({
     path: string;
     name: string;
   } | null>(null);
+  // General settings state for presentation
+  // Removed unused generalLoaded and setGeneralLoaded
+  // Removed unused generalLoaded/generalSlideshowInterval/generalPageProgress/generalAutoProgress
+
+  // Per-event state
   const [slideshowInterval, setSlideshowInterval] = React.useState<number>(
     initialData.slideshowInterval ?? 10
   );
+  const [pageProgress, setPageProgress] = React.useState<boolean>(
+    initialData.pageProgress ?? true
+  );
+  const [autoProgress, setAutoProgress] = React.useState<boolean>(
+    initialData.autoProgress ?? true
+  );
   const [websiteUrl, setWebsiteUrl] = React.useState<string>(initialData.websiteUrl ?? '');
+  
+  // Video-specific state with system defaults loading
+  const [autoplay, setAutoplay] = React.useState<boolean>(initialData.autoplay ?? true);
+  const [loop, setLoop] = React.useState<boolean>(initialData.loop ?? true);
+  const [volume, setVolume] = React.useState<number>(initialData.volume ?? 0.8);
+  const [muted, setMuted] = React.useState<boolean>(initialData.muted ?? false);
+  const [videoDefaultsLoaded, setVideoDefaultsLoaded] = React.useState<boolean>(false);
+  
   const [mediaModalOpen, setMediaModalOpen] = React.useState(false);
 
+  // Load system video defaults once when opening for a new video event
+  React.useEffect(() => {
+    if (open && !editMode && !videoDefaultsLoaded) {
+      (async () => {
+        try {
+          const api = await import('../apiSystemSettings');
+          const keys = ['video_autoplay', 'video_loop', 'video_volume', 'video_muted'] as const;
+          const [autoplayRes, loopRes, volumeRes, mutedRes] = await Promise.all(
+            keys.map(k => api.getSetting(k).catch(() => ({ value: null } as { value: string | null })))
+          );
+          
+          // Only apply defaults if not already set from initialData
+          if (initialData.autoplay === undefined) {
+            setAutoplay(autoplayRes.value == null ? true : autoplayRes.value === 'true');
+          }
+          if (initialData.loop === undefined) {
+            setLoop(loopRes.value == null ? true : loopRes.value === 'true');
+          }
+          if (initialData.volume === undefined) {
+            const volParsed = volumeRes.value == null ? 0.8 : parseFloat(String(volumeRes.value));
+            setVolume(Number.isFinite(volParsed) ? volParsed : 0.8);
+          }
+          if (initialData.muted === undefined) {
+            setMuted(mutedRes.value == null ? false : mutedRes.value === 'true');
+          }
+          
+          setVideoDefaultsLoaded(true);
+        } catch {
+          // Silently fall back to hard-coded defaults
+          setVideoDefaultsLoaded(true);
+        }
+      })();
+    }
+  }, [open, editMode, videoDefaultsLoaded, initialData]);
+
   React.useEffect(() => {
     if (open) {
       const isSingleOccurrence = initialData.isSingleOccurrence || false;
@@ -131,9 +189,19 @@ const CustomEventModal: React.FC<CustomEventModalProps> = ({
       // --- KORREKTUR: Media, SlideshowInterval, WebsiteUrl aus initialData übernehmen ---
       setMedia(initialData.media ?? null);
       setSlideshowInterval(initialData.slideshowInterval ?? 10);
+      setPageProgress(initialData.pageProgress ?? true);
+      setAutoProgress(initialData.autoProgress ?? true);
       setWebsiteUrl(initialData.websiteUrl ?? '');
+      
+      // Video fields - use initialData values when editing
+      if (editMode) {
+        setAutoplay(initialData.autoplay ?? true);
+        setLoop(initialData.loop ?? true);
+        setVolume(initialData.volume ?? 0.8);
+        setMuted(initialData.muted ?? false);
+      }
     }
-  }, [open, initialData]);
+  }, [open, initialData, editMode]);
 
   React.useEffect(() => {
     if (!mediaModalOpen && pendingMedia) {
@@ -182,42 +250,16 @@ const CustomEventModal: React.FC<CustomEventModalProps> = ({
     if (type === 'website') {
       if (!websiteUrl.trim()) newErrors.websiteUrl = 'Webseiten-URL ist erforderlich';
     }
-
-    // Holiday blocking: prevent creating when range overlaps
-    if (
-      !editMode &&
-      blockHolidays &&
-      startDate &&
-      startTime &&
-      endTime &&
-      typeof isHolidayRange === 'function'
-    ) {
-      const s = new Date(
-        startDate.getFullYear(),
-        startDate.getMonth(),
-        startDate.getDate(),
-        startTime.getHours(),
-        startTime.getMinutes()
-      );
-      const e = new Date(
-        startDate.getFullYear(),
-        startDate.getMonth(),
-        startDate.getDate(),
-        endTime.getHours(),
-        endTime.getMinutes()
-      );
-      if (isHolidayRange(s, e)) {
-        newErrors.startDate = 'Dieser Zeitraum liegt in den Ferien und ist gesperrt.';
-      }
+    if (type === 'video') {
+      if (!media) newErrors.media = 'Bitte ein Video auswählen';
     }
+    // Holiday blocking logic removed (blockHolidays, isHolidayRange no longer used)
 
     if (Object.keys(newErrors).length > 0) {
       setErrors(newErrors);
       return;
     }
 
-    setErrors({});
-
     const group_id = typeof groupName === 'object' && groupName !== null ? groupName.id : groupName;
 
     // Build recurrence rule if repeat is enabled
@@ -269,7 +311,6 @@ const CustomEventModal: React.FC<CustomEventModalProps> = ({
       startDate,
       startTime,
       endTime,
-      // Initialize required fields
       repeat: isSingleOccurrence ? false : repeat,
       weekdays: isSingleOccurrence ? [] : weekdays,
       repeatUntil: isSingleOccurrence ? null : repeatUntil,
@@ -282,14 +323,24 @@ const CustomEventModal: React.FC<CustomEventModalProps> = ({
     };
 
     if (type === 'presentation') {
-      payload.event_media_id = media?.id;
+      payload.event_media_id = media?.id ? Number(media.id) : undefined;
       payload.slideshow_interval = slideshowInterval;
+      payload.page_progress = pageProgress;
+      payload.auto_progress = autoProgress;
     }
 
     if (type === 'website') {
       payload.website_url = websiteUrl;
     }
 
+    if (type === 'video') {
+      payload.event_media_id = media?.id ? Number(media.id) : undefined;
+      payload.autoplay = autoplay;
+      payload.loop = loop;
+      payload.volume = volume;
+      payload.muted = muted;
+    }
+
     try {
       let res;
       if (editMode && initialData && typeof initialData.Id === 'string') {
@@ -596,6 +647,20 @@ const CustomEventModal: React.FC<CustomEventModalProps> = ({
                     value={String(slideshowInterval)}
                     change={e => setSlideshowInterval(Number(e.value))}
                   />
+                  <div style={{ marginTop: 8 }}>
+                    <CheckBoxComponent
+                      label="Seitenfortschritt anzeigen"
+                      checked={pageProgress}
+                      change={e => setPageProgress(e.checked || false)}
+                    />
+                  </div>
+                  <div style={{ marginTop: 8 }}>
+                    <CheckBoxComponent
+                      label="Automatischer Fortschritt"
+                      checked={autoProgress}
+                      change={e => setAutoProgress(e.checked || false)}
+                    />
+                  </div>
                 </div>
               )}
               {type === 'website' && (
@@ -608,6 +673,61 @@ const CustomEventModal: React.FC<CustomEventModalProps> = ({
                   />
                 </div>
               )}
+              {type === 'video' && (
+                <div>
+                  <div style={{ marginBottom: 8, marginTop: 16 }}>
+                    <button
+                      className="e-btn"
+                      onClick={() => setMediaModalOpen(true)}
+                      style={{ width: '100%' }}
+                    >
+                      Video auswählen/hochladen
+                    </button>
+                  </div>
+                  <div style={{ marginBottom: 8 }}>
+                    <b>Ausgewähltes Video:</b>{' '}
+                    {media ? (
+                      media.path
+                    ) : (
+                      <span style={{ color: '#888' }}>Kein Video ausgewählt</span>
+                    )}
+                  </div>
+                  <div style={{ marginTop: 8 }}>
+                    <CheckBoxComponent
+                      label="Automatisch abspielen"
+                      checked={autoplay}
+                      change={e => setAutoplay(e.checked || false)}
+                    />
+                  </div>
+                  <div style={{ marginTop: 8 }}>
+                    <CheckBoxComponent
+                      label="In Schleife abspielen"
+                      checked={loop}
+                      change={e => setLoop(e.checked || false)}
+                    />
+                  </div>
+                  <div style={{ marginTop: 8 }}>
+                    <label style={{ display: 'block', marginBottom: 4, fontWeight: 500, fontSize: '14px' }}>
+                      Lautstärke
+                    </label>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                      <TextBoxComponent
+                        placeholder="0.0 - 1.0"
+                        floatLabelType="Never"
+                        type="number"
+                        value={String(volume)}
+                        change={e => setVolume(Math.max(0, Math.min(1, Number(e.value))))}
+                        style={{ flex: 1 }}
+                      />
+                      <CheckBoxComponent
+                        label="Ton aus"
+                        checked={muted}
+                        change={e => setMuted(e.checked || false)}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>

dashboard/src/infoscreen_groups.tsx

@@ -141,6 +141,25 @@ const Infoscreen_groups: React.FC = () => {
       ]);
       setNewGroupName('');
       setShowDialog(false);
+      
+      // Update group order to include the new group
+      try {
+        const orderResponse = await fetch('/api/groups/order');
+        if (orderResponse.ok) {
+          const orderData = await orderResponse.json();
+          const currentOrder = orderData.order || [];
+          // Add new group ID to the end if not already present
+          if (!currentOrder.includes(newGroup.id)) {
+            await fetch('/api/groups/order', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ order: [...currentOrder, newGroup.id] }),
+            });
+          }
+        }
+      } catch (err) {
+        console.error('Failed to update group order:', err);
+      }
     } catch (err) {
       toast.show({
         content: (err as Error).message,
@@ -154,6 +173,10 @@ const Infoscreen_groups: React.FC = () => {
   // Löschen einer Gruppe
   const handleDeleteGroup = async (groupName: string) => {
     try {
+      // Find the group ID before deleting
+      const groupToDelete = groups.find(g => g.headerText === groupName);
+      const deletedGroupId = groupToDelete?.id;
+      
       // Clients der Gruppe in "Nicht zugeordnet" verschieben
       const groupClients = clients.filter(c => c.Status === groupName);
       if (groupClients.length > 0) {
@@ -172,6 +195,27 @@ const Infoscreen_groups: React.FC = () => {
         timeOut: 5000,
         showCloseButton: false,
       });
+      
+      // Update group order to remove the deleted group
+      if (deletedGroupId) {
+        try {
+          const orderResponse = await fetch('/api/groups/order');
+          if (orderResponse.ok) {
+            const orderData = await orderResponse.json();
+            const currentOrder = orderData.order || [];
+            // Remove deleted group ID from order
+            const updatedOrder = currentOrder.filter((id: number) => id !== deletedGroupId);
+            await fetch('/api/groups/order', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ order: updatedOrder }),
+            });
+          }
+        } catch (err) {
+          console.error('Failed to update group order:', err);
+        }
+      }
+      
       // Gruppen und Clients neu laden
       const groupData = await fetchGroups();
       const groupMap = Object.fromEntries(groupData.map((g: Group) => [g.id, g.name]));

dashboard/src/media.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useState, useRef, useMemo } from 'react';
 import CustomMediaInfoPanel from './components/CustomMediaInfoPanel';
 import {
@@ -96,6 +97,89 @@ const Media: React.FC = () => {
           uploadUrl: hostUrl + 'upload',
           downloadUrl: hostUrl + 'download',
         }}
+        // Increase upload settings: default maxFileSize for Syncfusion FileManager is ~30_000_000 (30 MB).
+        // Set `maxFileSize` in bytes and `allowedExtensions` for video types you want to accept.
+        // We disable autoUpload so we can validate duration client-side before sending.
+        uploadSettings={{
+         maxFileSize: 1.5 * 1024 * 1024 * 1024, // 1.5 GB - enough for 10min Full HD video at high bitrate
+         allowedExtensions: '.pdf,.ppt,.pptx,.odp,.mp4,.webm,.ogg,.mov,.mkv,.avi,.wmv,.flv,.mpg,.mpeg,.jpg,.jpeg,.png,.gif,.bmp,.tiff,.svg',
+          autoUpload: false,
+         minFileSize: 0, // Allow all file sizes (no minimum)
+          // chunkSize can be added later once server supports chunk assembly
+        }}
+        // Validate video duration (max 10 minutes) before starting upload.
+        created={() => {
+          try {
+            const el = fileManagerRef.current?.element as any;
+            const inst = el && el.ej2_instances && el.ej2_instances[0];
+            const maxSeconds = 10 * 60; // 10 minutes
+        if (inst && inst.uploadObj) {
+              // Override the selected handler to validate files before upload
+              const originalSelected = inst.uploadObj.selected;
+              inst.uploadObj.selected = async (args: any) => {
+                const filesData = args && (args.filesData || args.files) ? (args.filesData || args.files) : [];
+                const tooLong: string[] = [];
+                // Helper to get native File object
+                const getRawFile = (fd: any) => fd && (fd.rawFile || fd.file || fd) as File;
+
+                const checks = Array.from(filesData).map((fd: any) => {
+                  const file = getRawFile(fd);
+                  if (!file) return Promise.resolve(true);
+                  // Only check video MIME types or common extensions
+                  if (!file.type.startsWith('video') && !/\.(mp4|webm|ogg|mov|mkv)$/i.test(file.name)) {
+                    return Promise.resolve(true);
+                  }
+                  return new Promise<boolean>((resolve) => {
+                    const url = URL.createObjectURL(file);
+                    const video = document.createElement('video');
+                    video.preload = 'metadata';
+                    video.src = url;
+                    const clean = () => {
+                      try { URL.revokeObjectURL(url); } catch { /* noop */ }
+                    };
+                    video.onloadedmetadata = function () {
+                      clean();
+                      if (video.duration && video.duration <= maxSeconds) {
+                        resolve(true);
+                      } else {
+                        tooLong.push(`${file.name} (${Math.round(video.duration||0)}s)`);
+                        resolve(false);
+                      }
+                    };
+                    video.onerror = function () {
+                      clean();
+                      // If metadata can't be read, allow upload and let server verify
+                      resolve(true);
+                    };
+                  });
+                });
+
+                const results = await Promise.all(checks);
+                const allOk = results.every(Boolean);
+                if (!allOk) {
+                  // Cancel the automatic upload and show error to user
+                  args.cancel = true;
+                  const msg = `Upload blocked: the following videos exceed ${maxSeconds} seconds:\n` + tooLong.join('\n');
+                  // Use alert for now; replace with project's toast system if available
+                  alert(msg);
+                  return;
+                }
+                // All files OK — proceed with original selected handler if present,
+                // otherwise start upload programmatically
+                if (typeof originalSelected === 'function') {
+                  try { originalSelected.call(inst.uploadObj, args); } catch { /* noop */ }
+                }
+                // If autoUpload is false we need to start upload manually
+                try {
+                  inst.uploadObj.upload(args && (args.filesData || args.files));
+                } catch { /* ignore — uploader may handle starting itself */ }
+              };
+            }
+          } catch (e) {
+            // Non-fatal: if we can't hook uploader, uploads will behave normally
+            console.error('Could not attach video-duration hook to uploader', e);
+          }
+        }}
         toolbarSettings={{
           items: [
             'NewFolder',

dashboard/src/ressourcen.css

@@ -0,0 +1,177 @@
+/* Ressourcen - Timeline Schedule Styles */
+
+.ressourcen-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.ressourcen-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.ressourcen-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-bottom: 30px;
+  align-items: center;
+  background-color: white;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.ressourcen-control-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ressourcen-label {
+  font-weight: 500;
+  color: #555;
+  white-space: nowrap;
+}
+
+.ressourcen-button-group {
+  display: flex;
+  gap: 8px;
+}
+
+.ressourcen-button {
+  border-radius: 4px !important;
+  font-weight: 500;
+}
+
+/* Group Order Panel */
+.ressourcen-order-panel {
+  background: white;
+  padding: 15px;
+  margin-bottom: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.ressourcen-order-header {
+  width: 100%;
+}
+
+.ressourcen-order-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 250px;
+  overflow-y: auto;
+  padding: 8px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+.ressourcen-order-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.ressourcen-order-position {
+  font-weight: 600;
+  color: #666;
+  min-width: 24px;
+  text-align: right;
+}
+
+.ressourcen-order-name {
+  flex: 1;
+  color: #333;
+}
+
+.ressourcen-order-buttons {
+  display: flex;
+  gap: 4px;
+}
+
+.ressourcen-order-buttons .e-btn {
+  min-width: 32px !important;
+}
+
+.ressourcen-loading {
+  text-align: center;
+  padding: 40px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.ressourcen-loading p {
+  font-size: 16px;
+  color: #666;
+}
+
+.ressourcen-timeline-wrapper {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Scheduler Timeline Styling */
+.e-schedule {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+.e-schedule .e-timeline-view {
+  border: none;
+}
+
+.e-schedule .e-date-header {
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.e-schedule .e-header-cells {
+  font-weight: 600;
+  color: #333;
+}
+
+.ressourcen-timeline-wrapper .e-schedule {
+  flex: 1;
+  height: 100% !important;
+}
+
+.e-schedule .e-work-cells {
+  background-color: #fafafa;
+  border-color: #f0f0f0;
+}
+
+/* Set compact row height */
+.e-schedule .e-timeline-view .e-content-wrap table tbody tr {
+  height: 65px;
+}
+
+.e-schedule .e-timeline-view .e-content-wrap .e-work-cells {
+  height: 65px;
+}
+
+/* Event bar styling */
+.e-schedule .e-appointment {
+  border-radius: 4px;
+  color: white;
+  line-height: normal;
+}
+
+.e-schedule .e-appointment .e-subject {
+  font-size: 12px;
+  font-weight: 500;
+}

dashboard/src/ressourcen.tsx

@@ -1,8 +1,356 @@
-import React from 'react';
-const Ressourcen: React.FC = () => (
-  <div>
-    <h2 className="text-xl font-bold mb-4">Ressourcen</h2>
-    <p>Willkommen im Infoscreen-Management Ressourcen.</p>
-  </div>
-);
+import React, { useEffect, useState } from 'react';
+import {
+  ScheduleComponent,
+  ViewsDirective,
+  ViewDirective,
+  Inject,
+  TimelineViews,
+  Resize,
+  DragAndDrop,
+  ResourcesDirective,
+  ResourceDirective,
+} from '@syncfusion/ej2-react-schedule';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { fetchGroupsWithClients, type Group } from './apiClients';
+import { fetchEvents } from './apiEvents';
+import { getGroupColor } from './groupColors';
+import './ressourcen.css';
+
+interface ScheduleEvent {
+  Id: number;
+  Subject: string;
+  StartTime: Date;
+  EndTime: Date;
+  ResourceId: number;
+  EventType?: string;
+}
+
+type TimelineView = 'day' | 'week';
+
+const Ressourcen: React.FC = () => {
+  const [scheduleData, setScheduleData] = useState<ScheduleEvent[]>([]);
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [groupOrder, setGroupOrder] = useState<number[]>([]);
+  const [showOrderPanel, setShowOrderPanel] = useState<boolean>(false);
+  const [timelineView] = useState<TimelineView>('day');
+  const [viewDate] = useState<Date>(() => {
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    return now;
+  });
+  const [loading, setLoading] = useState<boolean>(false);
+  const scheduleRef = React.useRef<ScheduleComponent>(null);
+
+  // Calculate dynamic height based on number of groups
+  const calculatedHeight = React.useMemo(() => {
+    const rowHeight = 65; // px per row
+    const headerHeight = 100; // approx header height
+    const totalHeight = groups.length * rowHeight + headerHeight;
+    return `${totalHeight}px`;
+  }, [groups.length]);
+
+  // Load groups on mount
+  useEffect(() => {
+    const loadGroups = async () => {
+      try {
+        console.log('[Ressourcen] Loading groups...');
+        const fetchedGroups = await fetchGroupsWithClients();
+        console.log('[Ressourcen] Fetched groups:', fetchedGroups);
+        // Filter out "Nicht zugeordnet" but show all other groups even if empty
+        const filteredGroups = fetchedGroups.filter(
+          (group) => group.name !== 'Nicht zugeordnet'
+        );
+        console.log('[Ressourcen] Filtered groups:', filteredGroups);
+        setGroups(filteredGroups);
+      } catch (error) {
+        console.error('Fehler beim Laden der Gruppen:', error);
+      }
+    };
+    loadGroups();
+  }, []);
+
+  // Helper: Parse ISO date string
+  const parseUTCDate = React.useCallback((dateStr: string): Date => {
+    const utcStr = dateStr.endsWith('Z') ? dateStr : dateStr + 'Z';
+    return new Date(utcStr);
+  }, []);
+
+  // Calculate date range based on view
+  const getDateRange = React.useCallback((): { start: Date; end: Date } => {
+    const start = new Date(viewDate);
+    start.setHours(0, 0, 0, 0);
+
+    const end = new Date(start);
+    if (timelineView === 'day') {
+      end.setHours(23, 59, 59, 999);
+    } else if (timelineView === 'week') {
+      end.setDate(start.getDate() + 6);
+      end.setHours(23, 59, 59, 999);
+    }
+    return { start, end };
+  }, [viewDate, timelineView]);
+
+  // Load events for all groups
+  useEffect(() => {
+    if (groups.length === 0) {
+      console.log('[Ressourcen] No groups to load events for');
+      setScheduleData([]);
+      return;
+    }
+
+    const loadEventsForAllGroups = async () => {
+      setLoading(true);
+      console.log('[Ressourcen] Loading events for', groups.length, 'groups');
+      try {
+        const { start, end } = getDateRange();
+        const events: ScheduleEvent[] = [];
+        let eventId = 1;
+
+        // Create events for each group
+        for (const group of groups) {
+          try {
+            console.log(`[Ressourcen] Fetching events for group "${group.name}" (ID: ${group.id})`);
+            const apiEvents = await fetchEvents(group.id.toString(), false, {
+              start,
+              end,
+            });
+            console.log(`[Ressourcen] Got ${apiEvents?.length || 0} events for group "${group.name}"`);
+
+            if (Array.isArray(apiEvents) && apiEvents.length > 0) {
+              const event = apiEvents[0];
+              const eventTitle = event.subject || event.title || 'Unnamed Event';
+              const eventType = event.type || event.event_type || 'other';
+              const eventStart = event.startTime || event.start;
+              const eventEnd = event.endTime || event.end;
+
+              if (eventStart && eventEnd) {
+                const parsedStart = parseUTCDate(eventStart);
+                const parsedEnd = parseUTCDate(eventEnd);
+
+                // Capitalize first letter of event type
+                const formattedType = eventType.charAt(0).toUpperCase() + eventType.slice(1);
+
+                events.push({
+                  Id: eventId++,
+                  Subject: `${formattedType} - ${eventTitle}`,
+                  StartTime: parsedStart,
+                  EndTime: parsedEnd,
+                  ResourceId: group.id,
+                  EventType: eventType,
+                });
+                console.log(`[Ressourcen] Group "${group.name}" has event: ${eventTitle}`);
+              }
+            }
+          } catch (error) {
+            console.error(`Fehler beim Laden von Ereignissen für Gruppe ${group.name}:`, error);
+          }
+        }
+
+        console.log('[Ressourcen] Final events:', events);
+        setScheduleData(events);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadEventsForAllGroups();
+  }, [groups, timelineView, viewDate, parseUTCDate, getDateRange]);
+
+  // Load saved group order from backend on mount
+  useEffect(() => {
+    const loadGroupOrder = async () => {
+      try {
+        console.log('[Ressourcen] Loading saved group order from backend...');
+        const response = await fetch('/api/groups/order');
+        if (response.ok) {
+          const data = await response.json();
+          console.log('[Ressourcen] Retrieved group order:', data);
+          if (data.order && Array.isArray(data.order)) {
+            // Filter order to only include IDs that exist in current groups
+            const existingGroupIds = groups.map(g => g.id);
+            const validOrder = data.order.filter((id: number) => existingGroupIds.includes(id));
+            
+            // Add any missing group IDs that aren't in the saved order
+            const missingIds = existingGroupIds.filter(id => !validOrder.includes(id));
+            const finalOrder = [...validOrder, ...missingIds];
+            
+            console.log('[Ressourcen] Synced order:', finalOrder);
+            setGroupOrder(finalOrder);
+          } else {
+            // No saved order, use default (current group order)
+            setGroupOrder(groups.map(g => g.id));
+          }
+        } else {
+          console.log('[Ressourcen] No saved order found, using default');
+          setGroupOrder(groups.map(g => g.id));
+        }
+      } catch (error) {
+        console.error('[Ressourcen] Error loading group order:', error);
+        // Fall back to default order
+        setGroupOrder(groups.map(g => g.id));
+      }
+    };
+
+    if (groups.length > 0 && groupOrder.length === 0) {
+      loadGroupOrder();
+    }
+  }, [groups, groupOrder.length]);
+
+  // Move group up in order
+  const moveGroupUp = (groupId: number) => {
+    const index = groupOrder.indexOf(groupId);
+    if (index > 0) {
+      const newOrder = [...groupOrder];
+      [newOrder[index - 1], newOrder[index]] = [newOrder[index], newOrder[index - 1]];
+      setGroupOrder(newOrder);
+    }
+  };
+
+  // Move group down in order
+  const moveGroupDown = (groupId: number) => {
+    const index = groupOrder.indexOf(groupId);
+    if (index < groupOrder.length - 1) {
+      const newOrder = [...groupOrder];
+      [newOrder[index], newOrder[index + 1]] = [newOrder[index + 1], newOrder[index]];
+      setGroupOrder(newOrder);
+    }
+  };
+
+  // Save group order to backend
+  const saveGroupOrder = async () => {
+    try {
+      console.log('[Ressourcen] Saving group order:', groupOrder);
+      const response = await fetch('/api/groups/order', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ order: groupOrder }),
+      });
+      if (!response.ok) throw new Error('Failed to save group order');
+      console.log('[Ressourcen] Group order saved successfully');
+    } catch (error) {
+      console.error('Fehler beim Speichern der Reihenfolge:', error);
+    }
+  };
+
+  // Get sorted groups based on current order
+  const sortedGroups = React.useMemo(() => {
+    if (groupOrder.length === 0) return groups;
+    
+    // Map order to actual groups
+    const ordered = groupOrder
+      .map(id => groups.find(g => g.id === id))
+      .filter((g): g is Group => g !== undefined);
+    
+    // Add any groups not in the order (new groups)
+    const orderedIds = new Set(ordered.map(g => g.id));
+    const unordered = groups.filter(g => !orderedIds.has(g.id));
+    
+    return [...ordered, ...unordered];
+  }, [groups, groupOrder]);
+
+  return (
+    <div className="ressourcen-container">
+      <h1 className="ressourcen-title">📊 Ressourcen - Übersicht</h1>
+
+      <div style={{ marginBottom: '15px' }}>
+        <ButtonComponent
+          cssClass={showOrderPanel ? 'e-success' : 'e-outline'}
+          onClick={() => setShowOrderPanel(!showOrderPanel)}
+        >
+          {showOrderPanel ? '✓ Reihenfolge' : 'Reihenfolge ändern'}
+        </ButtonComponent>
+      </div>
+
+      {/* Group Order Control Panel */}
+      {showOrderPanel && (
+      <div className="ressourcen-order-panel">
+        <div className="ressourcen-order-header">
+          <h3 style={{ margin: '0 0 12px 0', fontSize: '14px', fontWeight: 600 }}>
+            📋 Reihenfolge der Gruppen
+          </h3>
+          <div className="ressourcen-order-list">
+            {sortedGroups.map((group, index) => (
+              <div key={group.id} className="ressourcen-order-item">
+                <span className="ressourcen-order-position">{index + 1}.</span>
+                <span className="ressourcen-order-name">{group.name}</span>
+                <div className="ressourcen-order-buttons">
+                  <ButtonComponent
+                    cssClass="e-outline e-small"
+                    onClick={() => moveGroupUp(group.id)}
+                    disabled={index === 0}
+                    title="Nach oben"
+                    style={{ padding: '4px 8px', minWidth: '32px' }}
+                  >
+                    ↑
+                  </ButtonComponent>
+                  <ButtonComponent
+                    cssClass="e-outline e-small"
+                    onClick={() => moveGroupDown(group.id)}
+                    disabled={index === sortedGroups.length - 1}
+                    title="Nach unten"
+                    style={{ padding: '4px 8px', minWidth: '32px' }}
+                  >
+                    ↓
+                  </ButtonComponent>
+                </div>
+              </div>
+            ))}
+          </div>
+          <ButtonComponent
+            cssClass="e-success"
+            onClick={saveGroupOrder}
+            style={{ marginTop: '12px', width: '100%' }}
+          >
+            💾 Reihenfolge speichern
+          </ButtonComponent>
+        </div>
+      </div>
+      )}
+
+      {/* Timeline Schedule */}
+      {loading ? (
+        <div className="ressourcen-loading">
+          <p>Wird geladen...</p>
+        </div>
+      ) : (
+        <div className="ressourcen-timeline-wrapper">
+          <ScheduleComponent
+            ref={scheduleRef}
+            height={calculatedHeight}
+            width="100%"
+            eventSettings={{ dataSource: scheduleData }}
+            selectedDate={viewDate}
+            currentView={timelineView === 'day' ? 'TimelineDay' : 'TimelineWeek'}
+            group={{ resources: ['Groups'], allowGroupEdit: false }}
+            timeScale={{ interval: 60, slotCount: 1 }}
+            rowAutoHeight={false}
+          >
+            <ViewsDirective>
+              <ViewDirective option="TimelineDay" displayName="Tag"></ViewDirective>
+              <ViewDirective option="TimelineWeek" displayName="Woche"></ViewDirective>
+            </ViewsDirective>
+            <ResourcesDirective>
+              <ResourceDirective
+                field="ResourceId"
+                title="Gruppe"
+                name="Groups"
+                allowMultiple={false}
+                dataSource={sortedGroups.map((g) => ({
+                  text: g.name,
+                  id: g.id,
+                  color: getGroupColor(g.id.toString(), groups.map(grp => ({ id: grp.id.toString() }))),
+                }))}
+                textField="text"
+                idField="id"
+                colorField="color"
+              />
+            </ResourcesDirective>
+            <Inject services={[TimelineViews, Resize, DragAndDrop]} />
+          </ScheduleComponent>
+        </div>
+      )}
+    </div>
+  );
+};
+
 export default Ressourcen;

dashboard/src/users.tsx

@@ -1,8 +1,820 @@
 import React from 'react';
-const Benutzer: React.FC = () => (
-  <div>
-    <h2 className="text-xl font-bold mb-4">Benutzer</h2>
-    <p>Willkommen im Infoscreen-Management Benutzer.</p>
-  </div>
-);
+import { useAuth } from './useAuth';
+import {
+  GridComponent,
+  ColumnsDirective,
+  ColumnDirective,
+  Page,
+  Inject,
+  Toolbar,
+  Edit,
+  CommandColumn,
+} from '@syncfusion/ej2-react-grids';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+import { ToastComponent } from '@syncfusion/ej2-react-notifications';
+import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
+import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
+import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
+import {
+  listUsers,
+  createUser,
+  updateUser,
+  resetUserPassword,
+  deleteUser,
+  type UserData,
+} from './apiUsers';
+
+const Benutzer: React.FC = () => {
+  const { user: currentUser } = useAuth();
+  const [users, setUsers] = React.useState<UserData[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  
+  // Dialog states
+  const [showCreateDialog, setShowCreateDialog] = React.useState(false);
+  const [showEditDialog, setShowEditDialog] = React.useState(false);
+  const [showPasswordDialog, setShowPasswordDialog] = React.useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false);
+  const [showDetailsDialog, setShowDetailsDialog] = React.useState(false);
+  const [selectedUser, setSelectedUser] = React.useState<UserData | null>(null);
+  
+  // Form states
+  const [formUsername, setFormUsername] = React.useState('');
+  const [formPassword, setFormPassword] = React.useState('');
+  const [formRole, setFormRole] = React.useState<'user' | 'editor' | 'admin' | 'superadmin'>('user');
+  const [formIsActive, setFormIsActive] = React.useState(true);
+  const [formBusy, setFormBusy] = React.useState(false);
+  
+  const toastRef = React.useRef<ToastComponent>(null);
+  
+  const isSuperadmin = currentUser?.role === 'superadmin';
+  
+  // Available roles based on current user's role
+  const availableRoles = React.useMemo(() => {
+    if (isSuperadmin) {
+      return [
+        { value: 'user', text: 'Benutzer (Viewer)' },
+        { value: 'editor', text: 'Editor (Content Manager)' },
+        { value: 'admin', text: 'Administrator' },
+        { value: 'superadmin', text: 'Superadministrator' },
+      ];
+    }
+    return [
+      { value: 'user', text: 'Benutzer (Viewer)' },
+      { value: 'editor', text: 'Editor (Content Manager)' },
+      { value: 'admin', text: 'Administrator' },
+    ];
+  }, [isSuperadmin]);
+  
+  const showToast = (content: string, cssClass: string = 'e-toast-success') => {
+    if (toastRef.current) {
+      toastRef.current.show({
+        content,
+        cssClass,
+        timeOut: 4000,
+      });
+    }
+  };
+  
+  const loadUsers = React.useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await listUsers();
+      setUsers(data);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Fehler beim Laden der Benutzer';
+      showToast(message, 'e-toast-danger');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  
+  React.useEffect(() => {
+    loadUsers();
+  }, [loadUsers]);
+  
+  // Create user
+  const handleCreateClick = () => {
+    setFormUsername('');
+    setFormPassword('');
+    setFormRole('user');
+    setFormIsActive(true);
+    setShowCreateDialog(true);
+  };
+  
+  const handleCreateSubmit = async () => {
+    if (!formUsername.trim()) {
+      showToast('Benutzername ist erforderlich', 'e-toast-warning');
+      return;
+    }
+    if (formUsername.trim().length < 3) {
+      showToast('Benutzername muss mindestens 3 Zeichen lang sein', 'e-toast-warning');
+      return;
+    }
+    if (!formPassword) {
+      showToast('Passwort ist erforderlich', 'e-toast-warning');
+      return;
+    }
+    if (formPassword.length < 6) {
+      showToast('Passwort muss mindestens 6 Zeichen lang sein', 'e-toast-warning');
+      return;
+    }
+    
+    setFormBusy(true);
+    try {
+      await createUser({
+        username: formUsername.trim(),
+        password: formPassword,
+        role: formRole,
+        isActive: formIsActive,
+      });
+      showToast('Benutzer erfolgreich erstellt', 'e-toast-success');
+      setShowCreateDialog(false);
+      loadUsers();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Fehler beim Erstellen des Benutzers';
+      showToast(message, 'e-toast-danger');
+    } finally {
+      setFormBusy(false);
+    }
+  };
+  
+  // Edit user
+  const handleEditClick = (userData: UserData) => {
+    setSelectedUser(userData);
+    setFormUsername(userData.username);
+    setFormRole(userData.role);
+    setFormIsActive(userData.isActive);
+    setShowEditDialog(true);
+  };
+  
+  const handleEditSubmit = async () => {
+    if (!selectedUser) return;
+    
+    if (!formUsername.trim()) {
+      showToast('Benutzername ist erforderlich', 'e-toast-warning');
+      return;
+    }
+    if (formUsername.trim().length < 3) {
+      showToast('Benutzername muss mindestens 3 Zeichen lang sein', 'e-toast-warning');
+      return;
+    }
+    
+    setFormBusy(true);
+    try {
+      await updateUser(selectedUser.id, {
+        username: formUsername.trim(),
+        role: formRole,
+        isActive: formIsActive,
+      });
+      showToast('Benutzer erfolgreich aktualisiert', 'e-toast-success');
+      setShowEditDialog(false);
+      loadUsers();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Fehler beim Aktualisieren des Benutzers';
+      showToast(message, 'e-toast-danger');
+    } finally {
+      setFormBusy(false);
+    }
+  };
+  
+  // Reset password
+  const handlePasswordClick = (userData: UserData) => {
+    if (currentUser && userData.id === currentUser.id) {
+      showToast('Bitte ändern Sie Ihr eigenes Passwort über das Benutzer-Menü (oben rechts).', 'e-toast-warning');
+      return;
+    }
+    setSelectedUser(userData);
+    setFormPassword('');
+    setShowPasswordDialog(true);
+  };
+  
+  const handlePasswordSubmit = async () => {
+    if (!selectedUser) return;
+    
+    if (!formPassword) {
+      showToast('Passwort ist erforderlich', 'e-toast-warning');
+      return;
+    }
+    if (formPassword.length < 6) {
+      showToast('Passwort muss mindestens 6 Zeichen lang sein', 'e-toast-warning');
+      return;
+    }
+    
+    setFormBusy(true);
+    try {
+      await resetUserPassword(selectedUser.id, formPassword);
+      showToast('Passwort erfolgreich zurückgesetzt', 'e-toast-success');
+      setShowPasswordDialog(false);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Fehler beim Zurücksetzen des Passworts';
+      showToast(message, 'e-toast-danger');
+    } finally {
+      setFormBusy(false);
+    }
+  };
+  
+  // Delete user
+  const handleDeleteClick = (userData: UserData) => {
+    setSelectedUser(userData);
+    setShowDeleteDialog(true);
+  };
+  
+  const handleDeleteConfirm = async () => {
+    if (!selectedUser) return;
+    
+    setFormBusy(true);
+    try {
+      await deleteUser(selectedUser.id);
+      showToast('Benutzer erfolgreich gelöscht', 'e-toast-success');
+      setShowDeleteDialog(false);
+      loadUsers();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Fehler beim Löschen des Benutzers';
+      showToast(message, 'e-toast-danger');
+    } finally {
+      setFormBusy(false);
+    }
+  };
+  
+  // View details
+  const handleDetailsClick = (userData: UserData) => {
+    setSelectedUser(userData);
+    setShowDetailsDialog(true);
+  };
+  
+  // Format date-time
+  const getRoleBadge = (role: string) => {
+    const roleMap: Record<string, { text: string; color: string }> = {
+      user: { text: 'Benutzer', color: '#6c757d' },
+      editor: { text: 'Editor', color: '#0d6efd' },
+      admin: { text: 'Admin', color: '#198754' },
+      superadmin: { text: 'Superadmin', color: '#dc3545' },
+    };
+    const info = roleMap[role] || { text: role, color: '#6c757d' };
+    return (
+      <span
+        style={{
+          padding: '4px 12px',
+          borderRadius: '12px',
+          backgroundColor: info.color,
+          color: 'white',
+          fontSize: '12px',
+          fontWeight: 500,
+          display: 'inline-block',
+        }}
+      >
+        {info.text}
+      </span>
+    );
+  };
+  
+  // Status badge
+  const getStatusBadge = (isActive: boolean) => {
+    return (
+      <span
+        style={{
+          padding: '4px 12px',
+          borderRadius: '12px',
+          backgroundColor: isActive ? '#28a745' : '#dc3545',
+          color: 'white',
+          fontSize: '12px',
+          fontWeight: 500,
+          display: 'inline-block',
+        }}
+      >
+        {isActive ? 'Aktiv' : 'Inaktiv'}
+      </span>
+    );
+  };
+  
+  // Grid commands - no longer needed with custom template
+  // const commands: CommandModel[] = [...]
+  
+  // Command click handler removed - using custom button template instead
+  
+  // Format dates
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return '-';
+    try {
+      const date = new Date(dateStr);
+      return date.toLocaleDateString('de-DE', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    } catch {
+      return '-';
+    }
+  };
+  
+  if (loading) {
+    return (
+      <div style={{ padding: 24 }}>
+        <div style={{ textAlign: 'center', padding: 40 }}>Lade Benutzer...</div>
+      </div>
+    );
+  }
+  
+  return (
+    <div style={{ padding: 24 }}>
+      <ToastComponent ref={toastRef} position={{ X: 'Right', Y: 'Top' }} />
+      
+      {/* Header */}
+      <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div>
+          <h2 style={{ margin: 0, fontSize: 24, fontWeight: 600 }}>Benutzerverwaltung</h2>
+          <p style={{ margin: '8px 0 0 0', color: '#6c757d' }}>
+            Verwalten Sie Benutzer und deren Rollen
+          </p>
+        </div>
+        <ButtonComponent
+          cssClass="e-success"
+          iconCss="e-icons e-plus"
+          onClick={handleCreateClick}
+        >
+          Neuer Benutzer
+        </ButtonComponent>
+      </div>
+      
+      {/* Statistics */}
+      <div style={{ marginBottom: 24, display: 'flex', gap: 16 }}>
+        <div className="e-card" style={{ flex: 1, padding: 16 }}>
+          <div style={{ fontSize: 14, color: '#6c757d', marginBottom: 4 }}>Gesamt</div>
+          <div style={{ fontSize: 28, fontWeight: 600 }}>{users.length}</div>
+        </div>
+        <div className="e-card" style={{ flex: 1, padding: 16 }}>
+          <div style={{ fontSize: 14, color: '#6c757d', marginBottom: 4 }}>Aktiv</div>
+          <div style={{ fontSize: 28, fontWeight: 600, color: '#28a745' }}>
+            {users.filter(u => u.isActive).length}
+          </div>
+        </div>
+        <div className="e-card" style={{ flex: 1, padding: 16 }}>
+          <div style={{ fontSize: 14, color: '#6c757d', marginBottom: 4 }}>Inaktiv</div>
+          <div style={{ fontSize: 28, fontWeight: 600, color: '#dc3545' }}>
+            {users.filter(u => !u.isActive).length}
+          </div>
+        </div>
+      </div>
+      
+      {/* Users Grid */}
+      <GridComponent
+        dataSource={users}
+        allowPaging={true}
+        allowSorting={true}
+        pageSettings={{ pageSize: 20, pageSizes: [10, 20, 50, 100] }}
+        height="600"
+      >
+        <ColumnsDirective>
+          <ColumnDirective field="id" headerText="ID" width="80" textAlign="Center" allowSorting={true} />
+          <ColumnDirective
+            field="username"
+            headerText="Benutzername"
+            width="200"
+            allowSorting={true}
+          />
+          <ColumnDirective
+            field="role"
+            headerText="Rolle"
+            width="150"
+            allowSorting={true}
+            template={(props: UserData) => getRoleBadge(props.role)}
+          />
+          <ColumnDirective
+            field="isActive"
+            headerText="Status"
+            width="120"
+            template={(props: UserData) => getStatusBadge(props.isActive)}
+          />
+          <ColumnDirective
+            field="createdAt"
+            headerText="Erstellt"
+            width="180"
+            template={(props: UserData) => formatDate(props.createdAt)}
+          />
+          <ColumnDirective
+            headerText="Aktionen"
+            width="280"
+            template={(props: UserData) => (
+              <div style={{ display: 'flex', gap: 4 }}>
+                <ButtonComponent
+                  cssClass="e-flat"
+                  onClick={() => handleDetailsClick(props)}
+                >
+                  Details
+                </ButtonComponent>
+                <ButtonComponent
+                  cssClass="e-flat e-primary"
+                  onClick={() => handleEditClick(props)}
+                >
+                  Bearbeiten
+                </ButtonComponent>
+                <ButtonComponent
+                  cssClass="e-flat e-info"
+                  onClick={() => handlePasswordClick(props)}
+                >
+                  Passwort
+                </ButtonComponent>
+                {isSuperadmin && currentUser?.id !== props.id && (
+                  <ButtonComponent
+                    cssClass="e-flat e-danger"
+                    onClick={() => handleDeleteClick(props)}
+                  >
+                    Löschen
+                  </ButtonComponent>
+                )}
+              </div>
+            )}
+          />
+        </ColumnsDirective>
+        <Inject services={[Page, Toolbar, Edit, CommandColumn]} />
+      </GridComponent>
+      
+      {/* Create User Dialog */}
+      <DialogComponent
+        isModal={true}
+        visible={showCreateDialog}
+        width="500px"
+        header="Neuer Benutzer"
+        showCloseIcon={true}
+        close={() => setShowCreateDialog(false)}
+        footerTemplate={() => (
+          <div>
+            <ButtonComponent
+              cssClass="e-flat"
+              onClick={() => setShowCreateDialog(false)}
+              disabled={formBusy}
+            >
+              Abbrechen
+            </ButtonComponent>
+            <ButtonComponent
+              cssClass="e-primary"
+              onClick={handleCreateSubmit}
+              disabled={formBusy}
+            >
+              {formBusy ? 'Erstelle...' : 'Erstellen'}
+            </ButtonComponent>
+          </div>
+        )}
+      >
+        <div style={{ padding: 16 }}>
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
+              Benutzername *
+            </label>
+            <TextBoxComponent
+              placeholder="Benutzername eingeben"
+              value={formUsername}
+              input={(e: any) => setFormUsername(e.value)}
+              disabled={formBusy}
+            />
+          </div>
+          
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
+              Passwort *
+            </label>
+            <TextBoxComponent
+              type="password"
+              placeholder="Mindestens 6 Zeichen"
+              value={formPassword}
+              input={(e: any) => setFormPassword(e.value)}
+              disabled={formBusy}
+            />
+          </div>
+          
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
+              Rolle *
+            </label>
+            <DropDownListComponent
+              dataSource={availableRoles}
+              fields={{ value: 'value', text: 'text' }}
+              value={formRole}
+              change={(e: any) => setFormRole(e.value)}
+              disabled={formBusy}
+            />
+          </div>
+          
+          <div style={{ marginBottom: 8 }}>
+            <CheckBoxComponent
+              label="Benutzer ist aktiv"
+              checked={formIsActive}
+              change={(e: any) => setFormIsActive(e.checked)}
+              disabled={formBusy}
+            />
+          </div>
+        </div>
+      </DialogComponent>
+      
+      {/* Edit User Dialog */}
+      <DialogComponent
+        isModal={true}
+        visible={showEditDialog}
+        width="500px"
+        header={`Benutzer bearbeiten: ${selectedUser?.username}`}
+        showCloseIcon={true}
+        close={() => setShowEditDialog(false)}
+        footerTemplate={() => (
+          <div>
+            <ButtonComponent
+              cssClass="e-flat"
+              onClick={() => setShowEditDialog(false)}
+              disabled={formBusy}
+            >
+              Abbrechen
+            </ButtonComponent>
+            <ButtonComponent
+              cssClass="e-primary"
+              onClick={handleEditSubmit}
+              disabled={formBusy}
+            >
+              {formBusy ? 'Speichere...' : 'Speichern'}
+            </ButtonComponent>
+          </div>
+        )}
+      >
+        <div style={{ padding: 16 }}>
+          {selectedUser?.id === currentUser?.id && (
+            <div
+              style={{
+                padding: 12,
+                backgroundColor: '#fff3cd',
+                border: '1px solid #ffc107',
+                borderRadius: 4,
+                marginBottom: 16,
+                fontSize: 14,
+              }}
+            >
+              ⚠️ Sie bearbeiten Ihr eigenes Konto. Sie können Ihre eigene Rolle oder Ihren aktiven Status nicht ändern.
+            </div>
+          )}
+          
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
+              Benutzername *
+            </label>
+            <TextBoxComponent
+              placeholder="Benutzername eingeben"
+              value={formUsername}
+              input={(e: any) => setFormUsername(e.value)}
+              disabled={formBusy}
+            />
+          </div>
+          
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
+              Rolle *
+            </label>
+            <DropDownListComponent
+              dataSource={availableRoles}
+              fields={{ value: 'value', text: 'text' }}
+              value={formRole}
+              change={(e: any) => setFormRole(e.value)}
+              disabled={formBusy || selectedUser?.id === currentUser?.id}
+            />
+            {selectedUser?.id === currentUser?.id && (
+              <div style={{ fontSize: 12, color: '#6c757d', marginTop: 4 }}>
+                Sie können Ihre eigene Rolle nicht ändern
+              </div>
+            )}
+          </div>
+          
+          <div style={{ marginBottom: 8 }}>
+            <CheckBoxComponent
+              label="Benutzer ist aktiv"
+              checked={formIsActive}
+              change={(e: any) => setFormIsActive(e.checked)}
+              disabled={formBusy || selectedUser?.id === currentUser?.id}
+            />
+            {selectedUser?.id === currentUser?.id && (
+              <div style={{ fontSize: 12, color: '#6c757d', marginTop: 4 }}>
+                Sie können Ihr eigenes Konto nicht deaktivieren
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogComponent>
+      
+      {/* Reset Password Dialog */}
+      <DialogComponent
+        isModal={true}
+        visible={showPasswordDialog}
+        width="500px"
+        header={`Passwort zurücksetzen: ${selectedUser?.username}`}
+        showCloseIcon={true}
+        close={() => setShowPasswordDialog(false)}
+        footerTemplate={() => (
+          <div>
+            <ButtonComponent
+              cssClass="e-flat"
+              onClick={() => setShowPasswordDialog(false)}
+              disabled={formBusy}
+            >
+              Abbrechen
+            </ButtonComponent>
+            <ButtonComponent
+              cssClass="e-warning"
+              onClick={handlePasswordSubmit}
+              disabled={formBusy}
+            >
+              {formBusy ? 'Setze zurück...' : 'Zurücksetzen'}
+            </ButtonComponent>
+          </div>
+        )}
+      >
+        <div style={{ padding: 16 }}>
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
+              Neues Passwort *
+            </label>
+            <TextBoxComponent
+              type="password"
+              placeholder="Mindestens 6 Zeichen"
+              value={formPassword}
+              input={(e: any) => setFormPassword(e.value)}
+              disabled={formBusy}
+            />
+          </div>
+          
+          <div
+            style={{
+              padding: 12,
+              backgroundColor: '#d1ecf1',
+              border: '1px solid #bee5eb',
+              borderRadius: 4,
+              fontSize: 14,
+            }}
+          >
+            💡 Das neue Passwort wird sofort wirksam. Informieren Sie den Benutzer über das neue Passwort.
+          </div>
+        </div>
+      </DialogComponent>
+      
+      {/* Delete User Dialog */}
+      <DialogComponent
+        isModal={true}
+        visible={showDeleteDialog}
+        width="500px"
+        header="Benutzer löschen"
+        showCloseIcon={true}
+        close={() => setShowDeleteDialog(false)}
+        footerTemplate={() => (
+          <div>
+            <ButtonComponent
+              cssClass="e-flat"
+              onClick={() => setShowDeleteDialog(false)}
+              disabled={formBusy}
+            >
+              Abbrechen
+            </ButtonComponent>
+            <ButtonComponent
+              cssClass="e-danger"
+              onClick={handleDeleteConfirm}
+              disabled={formBusy}
+            >
+              {formBusy ? 'Lösche...' : 'Endgültig löschen'}
+            </ButtonComponent>
+          </div>
+        )}
+      >
+        <div style={{ padding: 16 }}>
+          <div
+            style={{
+              padding: 16,
+              backgroundColor: '#f8d7da',
+              border: '1px solid #f5c6cb',
+              borderRadius: 4,
+              marginBottom: 16,
+            }}
+          >
+            <strong>⚠️ Warnung: Diese Aktion kann nicht rückgängig gemacht werden!</strong>
+          </div>
+          
+          <p style={{ marginBottom: 16 }}>
+            Möchten Sie den Benutzer <strong>{selectedUser?.username}</strong> wirklich endgültig löschen?
+          </p>
+          
+          <p style={{ margin: 0, fontSize: 14, color: '#6c757d' }}>
+            Tipp: Statt zu löschen, können Sie den Benutzer auch deaktivieren, um das Konto zu sperren und
+            gleichzeitig die Daten zu bewahren.
+          </p>
+        </div>
+      </DialogComponent>
+      
+      {/* Details Dialog */}
+      <DialogComponent
+        isModal={true}
+        visible={showDetailsDialog}
+        width="600px"
+        header={`Details: ${selectedUser?.username}`}
+        showCloseIcon={true}
+        close={() => setShowDetailsDialog(false)}
+        footerTemplate={() => (
+          <div>
+            <ButtonComponent cssClass="e-flat" onClick={() => setShowDetailsDialog(false)}>
+              Schließen
+            </ButtonComponent>
+          </div>
+        )}
+      >
+        <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 20 }}>
+          {/* Account Info */}
+          <div>
+            <h4 style={{ margin: '0 0 12px 0', fontSize: 14, fontWeight: 600, color: '#6c757d' }}>
+              Kontoinformation
+            </h4>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+              <div>
+                <div style={{ fontSize: 12, color: '#6c757d', marginBottom: 4 }}>Benutzer-ID</div>
+                <div style={{ fontSize: 14, fontWeight: 500 }}>{selectedUser?.id}</div>
+              </div>
+              <div>
+                <div style={{ fontSize: 12, color: '#6c757d', marginBottom: 4 }}>Benutzername</div>
+                <div style={{ fontSize: 14, fontWeight: 500 }}>{selectedUser?.username}</div>
+              </div>
+              <div>
+                <div style={{ fontSize: 12, color: '#6c757d', marginBottom: 4 }}>Rolle</div>
+                <div>{selectedUser ? getRoleBadge(selectedUser.role) : '-'}</div>
+              </div>
+              <div>
+                <div style={{ fontSize: 12, color: '#6c757d', marginBottom: 4 }}>Status</div>
+                <div>{selectedUser ? getStatusBadge(selectedUser.isActive) : '-'}</div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Security & Activity */}
+          <div>
+            <h4 style={{ margin: '0 0 12px 0', fontSize: 14, fontWeight: 600, color: '#6c757d' }}>
+              Sicherheit & Aktivität
+            </h4>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Letzter Login:</div>
+                <div style={{ fontSize: 13, color: '#666' }}>
+                  {selectedUser?.lastLoginAt ? formatDate(selectedUser.lastLoginAt) : 'Nie'}
+                </div>
+              </div>
+              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Passwort geändert:</div>
+                <div style={{ fontSize: 13, color: '#666' }}>
+                  {selectedUser?.lastPasswordChangeAt ? formatDate(selectedUser.lastPasswordChangeAt) : 'Nie'}
+                </div>
+              </div>
+              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Fehlgeschlagene Logins:</div>
+                <div style={{ fontSize: 13, color: '#666' }}>
+                  {selectedUser?.failedLoginAttempts || 0}
+                </div>
+              </div>
+              {selectedUser?.lastFailedLoginAt && (
+                <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
+                  <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Letzter Fehler:</div>
+                  <div style={{ fontSize: 13, color: '#666' }}>
+                    {formatDate(selectedUser.lastFailedLoginAt)}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          
+          {/* Deactivation Info (if applicable) */}
+          {selectedUser && !selectedUser.isActive && selectedUser.deactivatedAt && (
+            <div style={{ padding: 12, backgroundColor: '#fff3cd', border: '1px solid #ffc107', borderRadius: 4 }}>
+              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>Konto deaktiviert</div>
+              <div style={{ fontSize: 12, color: '#856404' }}>
+                am {formatDate(selectedUser.deactivatedAt)}
+              </div>
+            </div>
+          )}
+          
+          {/* Timestamps */}
+          <div>
+            <h4 style={{ margin: '0 0 12px 0', fontSize: 14, fontWeight: 600, color: '#6c757d' }}>
+              Zeitleisten
+            </h4>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Erstellt:</div>
+                <div style={{ fontSize: 13, color: '#666' }}>
+                  {selectedUser?.createdAt ? formatDate(selectedUser.createdAt) : '-'}
+                </div>
+              </div>
+              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Zuletzt geändert:</div>
+                <div style={{ fontSize: 13, color: '#666' }}>
+                  {selectedUser?.updatedAt ? formatDate(selectedUser.updatedAt) : '-'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogComponent>
+    </div>
+  );
+};
+
 export default Benutzer;

dashboard/vite.config.ts

@@ -20,6 +20,9 @@ export default defineConfig({
       '@syncfusion/ej2-react-navigations',
       '@syncfusion/ej2-react-buttons',
       '@syncfusion/ej2-react-splitbuttons',
+      '@syncfusion/ej2-react-grids',
+      '@syncfusion/ej2-react-schedule',
+      '@syncfusion/ej2-react-filemanager',
       '@syncfusion/ej2-base',
       '@syncfusion/ej2-navigations',
       '@syncfusion/ej2-buttons',

docker-compose.prod.yml

@@ -13,6 +13,8 @@ services:
     volumes:
       - ./nginx.conf:/etc/nginx/nginx.conf:ro
       - ./certs:/etc/nginx/certs:ro
+      # Mount host media folder into nginx so it can serve uploaded media
+      - ./server/media/:/opt/infoscreen/server/media/:ro
     depends_on:
       - server
       - dashboard

docker-compose.yml

@@ -35,6 +35,8 @@ services:
     volumes:
       - ./nginx.conf:/etc/nginx/nginx.conf:ro # 🔧 GEÄNDERT: Relativer Pfad
       - ./certs:/etc/nginx/certs:ro # 🔧 GEÄNDERT: Relativer Pfad
+      # Mount media volume so nginx can serve uploaded files
+      - media-data:/opt/infoscreen/server/media:ro
     depends_on:
       - server
       - dashboard

exclude.txt

@@ -0,0 +1,80 @@
+# OS/Editor
+.DS_Store
+Thumbs.db
+desktop.ini
+.vscode/
+.idea/
+*.swp
+*.swo
+*.bak
+*.tmp
+
+# Python
+__pycache__/
+*.py[cod]
+*.pyc
+*.pyo
+*.pyd
+*.pdb
+*.egg-info/
+*.eggs/
+.pytest_cache/
+*.mypy_cache/
+*.hypothesis/
+*.coverage
+.coverage.*
+*.cache
+instance/
+
+# Virtual environments
+venv/
+env/
+.venv/
+.env/
+
+# Environment files
+# .env
+# .env.local
+
+# Logs and databases
+*.log
+*.log.1
+*.sqlite3
+*.db
+
+# Node.js
+node_modules/
+dashboard/node_modules/
+dashboard/.vite/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-store/
+
+# Docker
+*.pid
+*.tar
+docker-compose.override.yml
+docker-compose.override.*.yml
+docker-compose.override.*.yaml
+
+# Devcontainer
+.devcontainer/
+
+# Project-specific
+received_screenshots/
+screenshots/
+media/
+mosquitto/
+certs/
+alte/
+sync.ffs_db
+dashboard/manitine_test.py
+dashboard/pages/test.py
+dashboard/sidebar_test.py
+dashboard/assets/responsive-sidebar.css
+dashboard/src/nested_tabs.js
+
+# Git
+.git/
+.gitignore

listener/listener.py

@@ -2,35 +2,125 @@ import os
 import json
 import logging
 import datetime
+import base64
+import requests
 import paho.mqtt.client as mqtt
 from sqlalchemy import create_engine
 from sqlalchemy.orm import sessionmaker
 from models.models import Client
+logging.basicConfig(level=logging.DEBUG, format='%(asctime)s [%(levelname)s] %(message)s')
 
+# Load .env in development
 if os.getenv("ENV", "development") == "development":
-    from dotenv import load_dotenv
-    load_dotenv(".env")
+    try:
+        from dotenv import load_dotenv
+        load_dotenv(".env")
+    except Exception:
+        pass
 
-# ENV-abhängige Konfiguration
+# ENV-dependent configuration
 ENV = os.getenv("ENV", "development")
 LOG_LEVEL = os.getenv("LOG_LEVEL", "INFO" if ENV == "production" else "DEBUG")
-DB_URL = os.environ.get(
-    "DB_CONN", "mysql+pymysql://user:password@db/infoscreen")
-
-# Logging
-logging.basicConfig(level=logging.DEBUG,
-                    format='%(asctime)s [%(levelname)s] %(message)s')
+DB_URL = os.environ.get("DB_CONN", "mysql+pymysql://user:password@db/infoscreen")
 
 # DB-Konfiguration
 engine = create_engine(DB_URL)
 Session = sessionmaker(bind=engine)
 
+# API configuration
+API_BASE_URL = os.getenv("API_BASE_URL", "http://server:8000")
+
+
+def handle_screenshot(uuid, payload):
+    """
+    Handle screenshot data received via MQTT and forward to API.
+    Payload can be either raw binary image data or JSON with base64-encoded image.
+    """
+    try:
+        # Try to parse as JSON first
+        try:
+            data = json.loads(payload.decode())
+            if "image" in data:
+                # Payload is JSON with base64 image
+                api_payload = {"image": data["image"]}
+                headers = {"Content-Type": "application/json"}
+                logging.debug(f"Forwarding base64 screenshot from {uuid} to API")
+            else:
+                logging.warning(f"Screenshot JSON from {uuid} missing 'image' field")
+                return
+        except (json.JSONDecodeError, UnicodeDecodeError):
+            # Payload is raw binary image data - encode to base64 for API
+            image_b64 = base64.b64encode(payload).decode('utf-8')
+            api_payload = {"image": image_b64}
+            headers = {"Content-Type": "application/json"}
+            logging.debug(f"Forwarding binary screenshot from {uuid} to API (encoded as base64)")
+
+        # Forward to API endpoint
+        api_url = f"{API_BASE_URL}/api/clients/{uuid}/screenshot"
+        response = requests.post(api_url, json=api_payload, headers=headers, timeout=10)
+
+        if response.status_code == 200:
+            logging.info(f"Screenshot von {uuid} erfolgreich an API weitergeleitet")
+        else:
+            logging.error(f"API returned status {response.status_code} for screenshot from {uuid}: {response.text}")
+
+    except requests.exceptions.RequestException as e:
+        logging.error(f"Failed to forward screenshot from {uuid} to API: {e}")
+    except Exception as e:
+        logging.error(f"Error handling screenshot from {uuid}: {e}")
+
+
+def on_connect(client, userdata, flags, reasonCode, properties):
+    """Callback for when client connects or reconnects (API v2)."""
+    try:
+        # Subscribe on every (re)connect so we don't miss heartbeats after broker restarts
+        client.subscribe("infoscreen/discovery")
+        client.subscribe("infoscreen/+/heartbeat")
+        client.subscribe("infoscreen/+/screenshot")
+        client.subscribe("infoscreen/+/dashboard")
+        logging.info(f"MQTT connected (reasonCode: {reasonCode}); (re)subscribed to discovery, heartbeats, screenshots, and dashboards")
+    except Exception as e:
+        logging.error(f"Subscribe failed on connect: {e}")
+
 
 def on_message(client, userdata, msg):
     topic = msg.topic
     logging.debug(f"Empfangene Nachricht auf Topic: {topic}")
 
     try:
+        # Dashboard-Handling (nested screenshot payload)
+        if topic.startswith("infoscreen/") and topic.endswith("/dashboard"):
+            uuid = topic.split("/")[1]
+            try:
+                payload_text = msg.payload.decode()
+                data = json.loads(payload_text)
+                shot = data.get("screenshot")
+                if isinstance(shot, dict):
+                    # Prefer 'data' field (base64) inside screenshot object
+                    image_b64 = shot.get("data")
+                    if image_b64:
+                        logging.debug(f"Dashboard enthält Screenshot für {uuid}; Weiterleitung an API")
+                        # Build a lightweight JSON with image field for API handler
+                        api_payload = json.dumps({"image": image_b64}).encode("utf-8")
+                        handle_screenshot(uuid, api_payload)
+                # Update last_alive if status present
+                if data.get("status") == "alive":
+                    session = Session()
+                    client_obj = session.query(Client).filter_by(uuid=uuid).first()
+                    if client_obj:
+                        client_obj.last_alive = datetime.datetime.now(datetime.UTC)
+                        session.commit()
+                    session.close()
+            except Exception as e:
+                logging.error(f"Fehler beim Verarbeiten des Dashboard-Payloads von {uuid}: {e}")
+            return
+
+        # Screenshot-Handling
+        if topic.startswith("infoscreen/") and topic.endswith("/screenshot"):
+            uuid = topic.split("/")[1]
+            handle_screenshot(uuid, msg.payload)
+            return
+
         # Heartbeat-Handling
         if topic.startswith("infoscreen/") and topic.endswith("/heartbeat"):
             uuid = topic.split("/")[1]
@@ -87,14 +177,14 @@ def on_message(client, userdata, msg):
 
 
 def main():
-    mqtt_client = mqtt.Client(protocol=mqtt.MQTTv311, callback_api_version=2)
+    mqtt_client = mqtt.Client(protocol=mqtt.MQTTv311, callback_api_version=mqtt.CallbackAPIVersion.VERSION2)
     mqtt_client.on_message = on_message
+    mqtt_client.on_connect = on_connect
+    # Set an exponential reconnect delay to survive broker restarts
+    mqtt_client.reconnect_delay_set(min_delay=1, max_delay=60)
     mqtt_client.connect("mqtt", 1883)
-    mqtt_client.subscribe("infoscreen/discovery")
-    mqtt_client.subscribe("infoscreen/+/heartbeat")
 
-    logging.info(
-        "Listener gestartet und abonniert auf infoscreen/discovery und infoscreen/+/heartbeat")
+    logging.info("Listener gestartet; warte auf MQTT-Verbindung und Nachrichten")
     mqtt_client.loop_forever()
 
 

listener/requirements.txt

@@ -2,3 +2,4 @@ paho-mqtt>=2.0
 SQLAlchemy>=2.0
 pymysql
 python-dotenv
+requests>=2.31.0

models/models.py

@@ -28,6 +28,13 @@ class User(Base):
     password_hash = Column(String(128), nullable=False)
     role = Column(Enum(UserRole), nullable=False, default=UserRole.user)
     is_active = Column(Boolean, default=True, nullable=False)
+    last_login_at = Column(TIMESTAMP(timezone=True), nullable=True)
+    last_password_change_at = Column(TIMESTAMP(timezone=True), nullable=True)
+    last_failed_login_at = Column(TIMESTAMP(timezone=True), nullable=True)
+    failed_login_attempts = Column(Integer, nullable=False, default=0, server_default="0")
+    locked_until = Column(TIMESTAMP(timezone=True), nullable=True)
+    deactivated_at = Column(TIMESTAMP(timezone=True), nullable=True)
+    deactivated_by = Column(Integer, ForeignKey('users.id', ondelete='SET NULL'), nullable=True)
     created_at = Column(TIMESTAMP(timezone=True),
                         server_default=func.current_timestamp())
     updated_at = Column(TIMESTAMP(timezone=True), server_default=func.current_timestamp(
@@ -155,7 +162,10 @@ class Event(Base):
     autoplay = Column(Boolean, nullable=True)            # NEU
     loop = Column(Boolean, nullable=True)                # NEU
     volume = Column(Float, nullable=True)                # NEU
+    muted = Column(Boolean, nullable=True)               # NEU: Video mute
     slideshow_interval = Column(Integer, nullable=True)  # NEU
+    page_progress = Column(Boolean, nullable=True)       # NEU: Seitenfortschritt (Page-Progress)
+    auto_progress = Column(Boolean, nullable=True)       # NEU: Präsentationsfortschritt (Auto-Progress)
     # Recurrence fields
     recurrence_rule = Column(String(255), nullable=True, index=True)  # iCalendar RRULE string
     recurrence_end = Column(TIMESTAMP(timezone=True), nullable=True, index=True)  # When recurrence ends

nginx.conf

@@ -9,6 +9,11 @@ http {
     server {
         listen 80;
         server_name _;
+        # Allow larger uploads (match Flask MAX_CONTENT_LENGTH); adjust as needed
+        client_max_body_size 1G;
+        # Increase proxy timeouts for long uploads on slow connections
+        proxy_read_timeout 3600s;
+        proxy_send_timeout 3600s;
 
         # Leitet /api/ und /screenshots/ an den API-Server weiter
         location /api/ {
@@ -17,6 +22,29 @@ http {
         location /screenshots/ {
             proxy_pass http://infoscreen_api/screenshots/;
         }
+        # Public direct serving (optional)
+        location /files/ {
+            alias /opt/infoscreen/server/media/;
+            sendfile on;
+            tcp_nopush on;
+            types {
+                video/mp4 mp4;
+                video/webm webm;
+                video/ogg ogg;
+            }
+            add_header Accept-Ranges bytes;
+            add_header Cache-Control "public, max-age=3600";
+        }
+
+        # Internal location for X-Accel-Redirect (protected)
+        location /internal_media/ {
+            internal;
+            alias /opt/infoscreen/server/media/;
+            sendfile on;
+            tcp_nopush on;
+            add_header Accept-Ranges bytes;
+            add_header Cache-Control "private, max-age=0, s-maxage=3600";
+        }
         # Alles andere geht ans Frontend
         location / {
             proxy_pass http://dashboard;

rsync-to-samba.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+# Rsync to Samba share using permanent fstab mount
+# Usage: ./rsync-to-samba.sh
+
+set -euo pipefail
+
+# Local source directory
+SOURCE="./infoscreen_server_2025"
+
+# Destination parent mount from fstab
+DEST_PARENT="/mnt/nas_share"
+DEST_SUBDIR="infoscreen_server_2025"
+DEST_PATH="$DEST_PARENT/$DEST_SUBDIR"
+
+# Exclude file (allows override via env)
+EXCLUDE_FILE="${EXCLUDE_FILE:-exclude.txt}"
+
+# Basic validations
+if [ ! -d "$SOURCE" ]; then
+  echo "Source directory not found: $SOURCE" >&2
+  exit 1
+fi
+
+if [ ! -f "$EXCLUDE_FILE" ]; then
+  echo "Exclude file not found: $EXCLUDE_FILE (expected in repo root)." >&2
+  exit 1
+fi
+
+# Ensure the fstab-backed mount is active; don't unmount after sync
+if ! mountpoint -q "$DEST_PARENT"; then
+  echo "Mount point $DEST_PARENT is not mounted. Attempting to mount via fstab..."
+  if ! sudo mount "$DEST_PARENT"; then
+    echo "Failed to mount $DEST_PARENT. Check your /etc/fstab entry and /root/.nas-credentials." >&2
+    exit 1
+  fi
+fi
+
+# Ensure destination directory exists
+mkdir -p "$DEST_PATH"
+
+echo "Syncing files to $DEST_PATH ..."
+rsync -avz --progress \
+  --exclude-from="$EXCLUDE_FILE" \
+  "$SOURCE/" "$DEST_PATH/"
+
+echo "Sync completed successfully."

scheduler/db_utils.py

@@ -5,8 +5,9 @@ from datetime import datetime
 import logging
 from sqlalchemy.orm import sessionmaker, joinedload
 from sqlalchemy import create_engine, or_, and_, text
-from models.models import Event, EventMedia, EventException
+from models.models import Event, EventMedia, EventException, SystemSetting
 from dateutil.rrule import rrulestr
+from urllib.request import Request, urlopen
 from datetime import timezone
 
 # Load .env only in development to mirror server/database.py behavior
@@ -167,6 +168,22 @@ def get_active_events(start: datetime, end: datetime, group_id: int = None):
         session.close()
 
 
+def get_system_setting_value(key: str, default: str | None = None) -> str | None:
+    """Fetch a system setting value by key from DB.
+
+    Returns the setting's string value or the provided default if missing.
+    """
+    session = Session()
+    try:
+        setting = session.query(SystemSetting).filter_by(key=key).first()
+        return setting.value if setting else default
+    except Exception as e:
+        logging.debug(f"[Scheduler] Failed to read system setting '{key}': {e}")
+        return default
+    finally:
+        session.close()
+
+
 def format_event_with_media(event):
     """Transform Event + EventMedia into client-expected format"""
     event_dict = {
@@ -175,6 +192,7 @@ def format_event_with_media(event):
         "start": str(event.start),
         "end": str(event.end),
         "group_id": event.group_id,
+        "event_type": event.event_type.value if event.event_type else None,
         # Carry recurrence metadata for consumers if needed
         "recurrence_rule": getattr(event, "recurrence_rule", None),
         "recurrence_end": (event.recurrence_end.isoformat() if getattr(event, "recurrence_end", None) else None),
@@ -189,7 +207,9 @@ def format_event_with_media(event):
                 "type": "slideshow",
                 "files": [],
                 "slide_interval": event.slideshow_interval or 5000,
-                "auto_advance": True
+                "auto_advance": True,
+                "page_progress": getattr(event, "page_progress", True),
+                "auto_progress": getattr(event, "auto_progress", True)
             }
 
             # Avoid per-call media-type debug to reduce log noise
@@ -242,6 +262,67 @@ def format_event_with_media(event):
                         f"[Scheduler] Using original file for event_media_id={media.id}: {filename}")
                     _media_decision_logged.add(media.id)
 
-        # Add other event types...
+        # Handle website and webuntis events (both display a website)
+        elif event.event_type.value in ("website", "webuntis"):
+            event_dict["website"] = {
+                "type": "browser",
+                "url": media.url if media.url else None
+            }
+            if media.id not in _media_decision_logged:
+                logging.debug(
+                    f"[Scheduler] Using website URL for event_media_id={media.id} (type={event.event_type.value}): {media.url}")
+                _media_decision_logged.add(media.id)
+
+        # Handle video events
+        elif event.event_type.value == "video":
+            filename = os.path.basename(media.file_path) if media.file_path else "video"
+            # Use streaming endpoint for better video playback support
+            stream_url = f"{API_BASE_URL}/api/eventmedia/stream/{media.id}/{filename}"
+
+            # Best-effort: probe the streaming endpoint for cheap metadata (HEAD request)
+            mime_type = None
+            size = None
+            accept_ranges = False
+            try:
+                req = Request(stream_url, method='HEAD')
+                with urlopen(req, timeout=2) as resp:
+                    # getheader returns None if missing
+                    mime_type = resp.getheader('Content-Type')
+                    length = resp.getheader('Content-Length')
+                    if length:
+                        try:
+                            size = int(length)
+                        except Exception:
+                            size = None
+                    accept_ranges = (resp.getheader('Accept-Ranges') or '').lower() == 'bytes'
+            except Exception as e:
+                # Don't fail the scheduler for probe errors; log once per media
+                if media.id not in _media_decision_logged:
+                    logging.debug(f"[Scheduler] HEAD probe for media_id={media.id} failed: {e}")
+
+            event_dict["video"] = {
+                "type": "media",
+                "url": stream_url,
+                "autoplay": getattr(event, "autoplay", True),
+                "loop": getattr(event, "loop", False),
+                "volume": getattr(event, "volume", 0.8),
+                # Best-effort metadata to help clients decide how to stream
+                "mime_type": mime_type,
+                "size": size,
+                "accept_ranges": accept_ranges,
+                # Optional richer info (may be null if not available): duration (seconds), resolution, bitrate
+                "duration": None,
+                "resolution": None,
+                "bitrate": None,
+                "qualities": [],
+                "thumbnails": [],
+                "checksum": None,
+            }
+            if media.id not in _media_decision_logged:
+                logging.debug(
+                    f"[Scheduler] Using video streaming URL for event_media_id={media.id}: {filename}")
+                _media_decision_logged.add(media.id)
+
+        # Add other event types (message, etc.) here as needed...
 
     return event_dict

scheduler/scheduler.py

@@ -2,25 +2,26 @@
 
 import os
 import logging
-from .db_utils import get_active_events
+from .db_utils import get_active_events, get_system_setting_value
 import paho.mqtt.client as mqtt
 import json
 import datetime
 import time
 
 # Logging-Konfiguration
-ENV = os.getenv("ENV", "development")
-LOG_LEVEL = os.getenv("LOG_LEVEL", "DEBUG" if ENV == "development" else "INFO")
+from logging.handlers import RotatingFileHandler
 LOG_PATH = os.path.join(os.path.dirname(__file__), "scheduler.log")
 os.makedirs(os.path.dirname(LOG_PATH), exist_ok=True)
-log_handlers = []
-if ENV == "production":
-    from logging.handlers import RotatingFileHandler
-    log_handlers.append(RotatingFileHandler(
-        LOG_PATH, maxBytes=2*1024*1024, backupCount=5, encoding="utf-8"))
-else:
-    log_handlers.append(logging.FileHandler(LOG_PATH, encoding="utf-8"))
-if os.getenv("DEBUG_MODE", "1" if ENV == "development" else "0") in ("1", "true", "True"):
+LOG_LEVEL = os.getenv("LOG_LEVEL", "INFO")
+log_handlers = [
+    RotatingFileHandler(
+        LOG_PATH,
+        maxBytes=10*1024*1024,  # 10 MB
+        backupCount=2,          # 1 current + 2 backups = 3 files total
+        encoding="utf-8"
+    )
+]
+if os.getenv("DEBUG_MODE", "0") in ("1", "true", "True"):
     log_handlers.append(logging.StreamHandler())
 logging.basicConfig(
     level=getattr(logging, LOG_LEVEL.upper(), logging.INFO),
@@ -36,7 +37,12 @@ def main():
 
     POLL_INTERVAL = 30  # Sekunden, Empfehlung für seltene Änderungen
     # 0 = aus; z.B. 600 für alle 10 Min
-    REFRESH_SECONDS = int(os.getenv("REFRESH_SECONDS", "0"))
+    # initial value from DB or fallback to env
+    try:
+        db_val = get_system_setting_value("refresh_seconds", None)
+        REFRESH_SECONDS = int(db_val) if db_val is not None else int(os.getenv("REFRESH_SECONDS", "0"))
+    except Exception:
+        REFRESH_SECONDS = int(os.getenv("REFRESH_SECONDS", "0"))
     # Konfigurierbares Zeitfenster in Tagen (Standard: 7)
     WINDOW_DAYS = int(os.getenv("EVENTS_WINDOW_DAYS", "7"))
     last_payloads = {}       # group_id -> payload
@@ -57,6 +63,12 @@ def main():
 
     while True:
         now = datetime.datetime.now(datetime.timezone.utc)
+        # refresh interval can change at runtime (superadmin settings)
+        try:
+            db_val = get_system_setting_value("refresh_seconds", None)
+            REFRESH_SECONDS = int(db_val) if db_val is not None else REFRESH_SECONDS
+        except Exception:
+            pass
         # Query window: next N days to capture upcoming events and recurring instances
         # Clients need to know what's coming, not just what's active right now
         end_window = now + datetime.timedelta(days=WINDOW_DAYS)
@@ -69,13 +81,32 @@ def main():
             logging.exception(f"Error while fetching events: {e}")
             events = []
 
-        # Gruppiere Events nach group_id
-        groups = {}
+
+        # Filter: Only include events active at 'now'
+        active_events = []
         for event in events:
+            start = event.get("start")
+            end = event.get("end")
+            # Parse ISO strings to datetime
+            try:
+                start_dt = datetime.datetime.fromisoformat(start)
+                end_dt = datetime.datetime.fromisoformat(end)
+                # Make both tz-aware (UTC) if naive
+                if start_dt.tzinfo is None:
+                    start_dt = start_dt.replace(tzinfo=datetime.timezone.utc)
+                if end_dt.tzinfo is None:
+                    end_dt = end_dt.replace(tzinfo=datetime.timezone.utc)
+            except Exception:
+                continue
+            if start_dt <= now < end_dt:
+                active_events.append(event)
+
+        # Gruppiere nur aktive Events nach group_id
+        groups = {}
+        for event in active_events:
             gid = event.get("group_id")
             if gid not in groups:
                 groups[gid] = []
-            # Event ist bereits ein Dictionary im gewünschten Format
             groups[gid].append(event)
 
         if not groups:
@@ -106,18 +137,18 @@ def main():
                     last_published_at[gid] = time.time()
 
         # Entferne Gruppen, die nicht mehr existieren (leere retained Message senden)
-        for gid in list(last_payloads.keys()):
-            if gid not in groups:
-                topic = f"infoscreen/events/{gid}"
-                result = client.publish(topic, payload="[]", retain=True)
-                if result.rc != mqtt.MQTT_ERR_SUCCESS:
-                    logging.error(
-                        f"Fehler beim Entfernen für Gruppe {gid}: {mqtt.error_string(result.rc)}")
-                else:
-                    logging.info(
-                        f"Events für Gruppe {gid} entfernt (leere retained Message gesendet)")
-                    del last_payloads[gid]
-                    last_published_at.pop(gid, None)
+        inactive_gids = set(last_payloads.keys()) - set(groups.keys())
+        for gid in inactive_gids:
+            topic = f"infoscreen/events/{gid}"
+            result = client.publish(topic, payload="[]", retain=True)
+            if result.rc != mqtt.MQTT_ERR_SUCCESS:
+                logging.error(
+                    f"Fehler beim Entfernen für Gruppe {gid}: {mqtt.error_string(result.rc)}")
+            else:
+                logging.info(
+                    f"Events für Gruppe {gid} entfernt (leere retained Message gesendet)")
+                del last_payloads[gid]
+                last_published_at.pop(gid, None)
 
         time.sleep(POLL_INTERVAL)
 

server/Dockerfile.dev

@@ -9,7 +9,7 @@ FROM python:3.13-slim
 # verbindet (gemäß devcontainer.json). Sie schaden aber nicht.
 ARG USER_ID=1000
 ARG GROUP_ID=1000
-RUN apt-get update && apt-get install -y --no-install-recommends locales curl git \
+RUN apt-get update && apt-get install -y --no-install-recommends locales curl git docker.io \
     && groupadd -g ${GROUP_ID} infoscreen_taa \
     && useradd -u ${USER_ID} -g ${GROUP_ID} --shell /bin/bash --create-home infoscreen_taa \
     && sed -i 's/# de_DE.UTF-8 UTF-8/de_DE.UTF-8 UTF-8/' /etc/locale.gen \

server/alembic/versions/21226a449037_add_muted_to_events.py

@@ -0,0 +1,30 @@
+"""add_muted_to_events
+
+Revision ID: 21226a449037
+Revises: 910951fd300a
+Create Date: 2025-11-05 17:24:29.168692
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = '21226a449037'
+down_revision: Union[str, None] = '910951fd300a'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    """Upgrade schema."""
+    # Add muted column to events table for video mute control
+    op.add_column('events', sa.Column('muted', sa.Boolean(), nullable=True))
+
+
+def downgrade() -> None:
+    """Downgrade schema."""
+    # Remove muted column
+    op.drop_column('events', 'muted')

server/alembic/versions/4f0b8a3e5c20_add_user_audit_fields.py

@@ -0,0 +1,52 @@
+"""add user audit fields
+
+Revision ID: 4f0b8a3e5c20
+Revises: 21226a449037
+Create Date: 2025-12-29 00:00:00.000000
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision: str = '4f0b8a3e5c20'
+down_revision: Union[str, None] = '21226a449037'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    """Upgrade schema."""
+    op.add_column('users', sa.Column('last_login_at', sa.TIMESTAMP(timezone=True), nullable=True))
+    op.add_column('users', sa.Column('last_password_change_at', sa.TIMESTAMP(timezone=True), nullable=True))
+    op.add_column('users', sa.Column('last_failed_login_at', sa.TIMESTAMP(timezone=True), nullable=True))
+    op.add_column(
+        'users',
+        sa.Column('failed_login_attempts', sa.Integer(), nullable=False, server_default='0')
+    )
+    op.add_column('users', sa.Column('locked_until', sa.TIMESTAMP(timezone=True), nullable=True))
+    op.add_column('users', sa.Column('deactivated_at', sa.TIMESTAMP(timezone=True), nullable=True))
+    op.add_column('users', sa.Column('deactivated_by', sa.Integer(), nullable=True))
+    op.create_foreign_key(
+        'fk_users_deactivated_by_users',
+        'users',
+        'users',
+        ['deactivated_by'],
+        ['id'],
+        ondelete='SET NULL',
+    )
+    # Optional: keep server_default for failed_login_attempts; remove if you prefer no default after backfill
+
+
+def downgrade() -> None:
+    """Downgrade schema."""
+    op.drop_constraint('fk_users_deactivated_by_users', 'users', type_='foreignkey')
+    op.drop_column('users', 'deactivated_by')
+    op.drop_column('users', 'deactivated_at')
+    op.drop_column('users', 'locked_until')
+    op.drop_column('users', 'failed_login_attempts')
+    op.drop_column('users', 'last_failed_login_at')
+    op.drop_column('users', 'last_password_change_at')
+    op.drop_column('users', 'last_login_at')

server/alembic/versions/910951fd300a_add_page_progress_and_auto_progress_to_.py

@@ -0,0 +1,34 @@
+"""Add page_progress and auto_progress to Event
+
+Revision ID: 910951fd300a
+Revises: 045626c9719a
+Create Date: 2025-10-18 11:59:25.224813
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = '910951fd300a'
+down_revision: Union[str, None] = '045626c9719a'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    """Upgrade schema."""
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('events', sa.Column('page_progress', sa.Boolean(), nullable=True))
+    op.add_column('events', sa.Column('auto_progress', sa.Boolean(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    """Downgrade schema."""
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('events', 'auto_progress')
+    op.drop_column('events', 'page_progress')
+    # ### end Alembic commands ###

server/database.py

@@ -14,7 +14,9 @@ if not DB_URL:
     # Dev: DB-URL aus Einzelwerten bauen
     DB_USER = os.getenv("DB_USER", "infoscreen_admin")
     DB_PASSWORD = os.getenv("DB_PASSWORD", "KqtpM7wmNd&mFKs")
-    DB_HOST = os.getenv("DB_HOST", "db")  # IMMER 'db' als Host im Container!
+    # Dev container: use host.docker.internal or localhost if db container isn't on same network
+    # Docker Compose: use 'db' service name
+    DB_HOST = os.getenv("DB_HOST", "db")  # Default to db for Docker Compose
     DB_NAME = os.getenv("DB_NAME", "infoscreen_by_taa")
     DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}/{DB_NAME}"
 

server/init_defaults.py

@@ -3,10 +3,22 @@ import os
 from dotenv import load_dotenv
 import bcrypt
 
-# .env laden
-load_dotenv()
+# .env laden (nur in Dev)
+if os.getenv("ENV", "development") == "development":
+    load_dotenv()
 
-DB_URL = f"mysql+pymysql://{os.getenv('DB_USER')}:{os.getenv('DB_PASSWORD')}@{os.getenv('DB_HOST')}:3306/{os.getenv('DB_NAME')}"
+# Use same logic as database.py: prefer DB_CONN, fallback to individual vars
+DB_URL = os.getenv("DB_CONN")
+if not DB_URL:
+    DB_USER = os.getenv("DB_USER", "infoscreen_admin")
+    DB_PASSWORD = os.getenv("DB_PASSWORD")
+    # In Docker Compose: DB_HOST will be 'db' from env
+    # In dev container: will be 'localhost' from .env
+    DB_HOST = os.getenv("DB_HOST", "db")  # Default to 'db' for Docker Compose
+    DB_NAME = os.getenv("DB_NAME", "infoscreen_by_taa")
+    DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:3306/{DB_NAME}"
+
+print(f"init_defaults.py connecting to: {DB_URL.split('@')[1] if '@' in DB_URL else DB_URL}")
 engine = create_engine(DB_URL, isolation_level="AUTOCOMMIT")
 
 with engine.connect() as conn:
@@ -45,8 +57,18 @@ with engine.connect() as conn:
 
         # Default System Settings anlegen
         default_settings = [
-            ('supplement_table_url', '', 'URL für Vertretungsplan (Stundenplan-Änderungstabelle)'),
+            ('supplement_table_url', '', 'URL für Vertretungsplan / WebUntis (Stundenplan-Änderungstabelle)'),
             ('supplement_table_enabled', 'false', 'Ob Vertretungsplan aktiviert ist'),
+            ('presentation_interval', '10', 'Standard Intervall für Präsentationen (Sekunden)'),
+            ('presentation_page_progress', 'true', 'Seitenfortschrift anzeigen (Page-Progress) für Präsentationen'),
+            ('presentation_auto_progress', 'true', 'Automatischer Fortschritt (Auto-Progress) für Präsentationen'),
+            ('video_autoplay', 'true', 'Autoplay (automatisches Abspielen) für Videos'),
+            ('video_loop', 'true', 'Loop (Wiederholung) für Videos'),
+            ('video_volume', '0.8', 'Standard Lautstärke für Videos (0.0 - 1.0)'),
+            ('holiday_banner_enabled', 'true', 'Ferienstatus-Banner auf Dashboard anzeigen'),
+            ('organization_name', '', 'Name der Organisation (wird im Header angezeigt)'),
+            ('refresh_seconds', '0', 'Scheduler Republish-Intervall (Sekunden; 0 deaktiviert)'),
+            ('group_order', '[]', 'Benutzerdefinierte Reihenfolge der Raumgruppen (JSON-Array mit Group-IDs)'),
         ]
     
         for key, value, description in default_settings:

server/routes/auth.py

@@ -10,8 +10,10 @@ from flask import Blueprint, request, jsonify, session
 import os
 from server.database import Session
 from models.models import User, UserRole
+from server.permissions import require_auth
 import bcrypt
 import sys
+from datetime import datetime, timezone
 
 sys.path.append('/workspace')
 
@@ -66,8 +68,17 @@ def login():
         
         # Verify password
         if not bcrypt.checkpw(password.encode('utf-8'), user.password_hash.encode('utf-8')):
+            # Track failed login attempt
+            user.last_failed_login_at = datetime.now(timezone.utc)
+            user.failed_login_attempts = (user.failed_login_attempts or 0) + 1
+            db_session.commit()
             return jsonify({"error": "Invalid credentials"}), 401
 
+        # Successful login: update last_login_at and reset failed attempts
+        user.last_login_at = datetime.now(timezone.utc)
+        user.failed_login_attempts = 0
+        db_session.commit()
+
         # Create session
         session['user_id'] = user.id
         session['username'] = user.username
@@ -173,6 +184,57 @@ def check_auth():
     return jsonify({"authenticated": False}), 200
 
 
+@auth_bp.route("/change-password", methods=["PUT"])
+@require_auth
+def change_password():
+    """
+    Allow the authenticated user to change their own password.
+
+    Request body:
+        {
+            "current_password": "string",
+            "new_password": "string"
+        }
+
+    Returns:
+        200: {"message": "Password changed successfully"}
+        400: {"error": "Validation error"}
+        401: {"error": "Invalid current password"}
+        404: {"error": "User not found"}
+    """
+    data = request.get_json() or {}
+    current_password = data.get("current_password", "")
+    new_password = data.get("new_password", "")
+
+    if not current_password or not new_password:
+        return jsonify({"error": "Current password and new password are required"}), 400
+
+    if len(new_password) < 6:
+        return jsonify({"error": "New password must be at least 6 characters"}), 400
+
+    user_id = session.get('user_id')
+    db_session = Session()
+    try:
+        user = db_session.query(User).filter_by(id=user_id).first()
+        if not user:
+            session.clear()
+            return jsonify({"error": "User not found"}), 404
+
+        # Verify current password
+        if not bcrypt.checkpw(current_password.encode('utf-8'), user.password_hash.encode('utf-8')):
+            return jsonify({"error": "Current password is incorrect"}), 401
+
+        # Update password hash and timestamp
+        new_hash = bcrypt.hashpw(new_password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')
+        user.password_hash = new_hash
+        user.last_password_change_at = datetime.now(timezone.utc)
+        db_session.commit()
+
+        return jsonify({"message": "Password changed successfully"}), 200
+    finally:
+        db_session.close()
+
+
 @auth_bp.route("/dev-login-superadmin", methods=["POST"])
 def dev_login_superadmin():
     """

server/routes/clients.py

@@ -273,6 +273,85 @@ def restart_client(uuid):
         return jsonify({"error": f"Failed to send MQTT message: {str(e)}"}), 500
 
 
+@clients_bp.route("/<uuid>/screenshot", methods=["POST"])
+def upload_screenshot(uuid):
+    """
+    Route to receive and store a screenshot from a client.
+    Expected payload: base64-encoded image data in JSON or binary image data.
+    Screenshots are stored as {uuid}.jpg in the screenshots folder.
+    Keeps last 20 screenshots per client (auto-cleanup).
+    """
+    import os
+    import base64
+    import glob
+    from datetime import datetime
+
+    session = Session()
+    client = session.query(Client).filter_by(uuid=uuid).first()
+    if not client:
+        session.close()
+        return jsonify({"error": "Client nicht gefunden"}), 404
+    session.close()
+
+    try:
+        # Handle JSON payload with base64-encoded image
+        if request.is_json:
+            data = request.get_json()
+            if "image" not in data:
+                return jsonify({"error": "Missing 'image' field in JSON payload"}), 400
+            
+            # Decode base64 image
+            image_data = base64.b64decode(data["image"])
+        else:
+            # Handle raw binary image data
+            image_data = request.get_data()
+
+        if not image_data:
+            return jsonify({"error": "No image data received"}), 400
+
+        # Ensure screenshots directory exists
+        screenshots_dir = os.path.join(os.path.dirname(__file__), "..", "screenshots")
+        os.makedirs(screenshots_dir, exist_ok=True)
+
+        # Store screenshot with timestamp to track latest
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        filename = f"{uuid}_{timestamp}.jpg"
+        filepath = os.path.join(screenshots_dir, filename)
+
+        with open(filepath, "wb") as f:
+            f.write(image_data)
+
+        # Also create/update a symlink or copy to {uuid}.jpg for easy retrieval
+        latest_filepath = os.path.join(screenshots_dir, f"{uuid}.jpg")
+        with open(latest_filepath, "wb") as f:
+            f.write(image_data)
+
+        # Cleanup: keep only last 20 timestamped screenshots per client
+        pattern = os.path.join(screenshots_dir, f"{uuid}_*.jpg")
+        existing_screenshots = sorted(glob.glob(pattern))
+        
+        # Keep last 20, delete older ones
+        max_screenshots = 20
+        if len(existing_screenshots) > max_screenshots:
+            for old_file in existing_screenshots[:-max_screenshots]:
+                try:
+                    os.remove(old_file)
+                except Exception as cleanup_error:
+                    # Log but don't fail the request if cleanup fails
+                    import logging
+                    logging.warning(f"Failed to cleanup old screenshot {old_file}: {cleanup_error}")
+
+        return jsonify({
+            "success": True,
+            "message": f"Screenshot received for client {uuid}",
+            "filename": filename,
+            "size": len(image_data)
+        }), 200
+
+    except Exception as e:
+        return jsonify({"error": f"Failed to process screenshot: {str(e)}"}), 500
+
+
 @clients_bp.route("/<uuid>", methods=["DELETE"])
 @admin_or_higher
 def delete_client(uuid):

server/routes/eventmedia.py

@@ -1,5 +1,5 @@
 from re import A
-from flask import Blueprint, request, jsonify, send_from_directory
+from flask import Blueprint, request, jsonify, send_from_directory, Response, send_file
 from server.permissions import editor_or_higher
 from server.database import Session
 from models.models import EventMedia, MediaType, Conversion, ConversionStatus
@@ -7,6 +7,7 @@ from server.task_queue import get_queue
 from server.worker import convert_event_media_to_pdf
 import hashlib
 import os
+import re
 
 eventmedia_bp = Blueprint('eventmedia', __name__, url_prefix='/api/eventmedia')
 
@@ -304,3 +305,63 @@ def get_media_by_id(media_id):
     }
     session.close()
     return jsonify(result)
+
+
+# --- Video Streaming with Range Request Support ---
+@eventmedia_bp.route('/stream/<int:media_id>/<path:filename>', methods=['GET'])
+def stream_video(media_id, filename):
+    """Stream video files with range request support for seeking"""
+    session = Session()
+    media = session.query(EventMedia).get(media_id)
+    if not media or not media.file_path:
+        session.close()
+        return jsonify({'error': 'Video not found'}), 404
+    
+    file_path = os.path.join(MEDIA_ROOT, media.file_path)
+    if not os.path.exists(file_path):
+        session.close()
+        return jsonify({'error': 'File not found'}), 404
+    
+    session.close()
+    
+    # Determine MIME type based on file extension
+    ext = os.path.splitext(filename)[1].lower()
+    mime_types = {
+        '.mp4': 'video/mp4',
+        '.webm': 'video/webm',
+        '.ogv': 'video/ogg',
+        '.avi': 'video/x-msvideo',
+        '.mkv': 'video/x-matroska',
+        '.mov': 'video/quicktime',
+        '.wmv': 'video/x-ms-wmv',
+        '.flv': 'video/x-flv',
+        '.mpg': 'video/mpeg',
+        '.mpeg': 'video/mpeg',
+    }
+    mime_type = mime_types.get(ext, 'video/mp4')
+    
+    # Support range requests for video seeking
+    range_header = request.headers.get('Range', None)
+    if not range_header:
+        return send_file(file_path, mimetype=mime_type)
+    
+    size = os.path.getsize(file_path)
+    byte_start, byte_end = 0, size - 1
+    
+    match = re.search(r'bytes=(\d+)-(\d*)', range_header)
+    if match:
+        byte_start = int(match.group(1))
+        if match.group(2):
+            byte_end = int(match.group(2))
+    
+    length = byte_end - byte_start + 1
+    
+    with open(file_path, 'rb') as f:
+        f.seek(byte_start)
+        data = f.read(length)
+    
+    response = Response(data, 206, mimetype=mime_type, direct_passthrough=True)
+    response.headers.add('Content-Range', f'bytes {byte_start}-{byte_end}/{size}')
+    response.headers.add('Accept-Ranges', 'bytes')
+    response.headers.add('Content-Length', str(length))
+    return response

server/routes/events.py

@@ -1,7 +1,8 @@
 from flask import Blueprint, request, jsonify
 from server.permissions import editor_or_higher
 from server.database import Session
-from models.models import Event, EventMedia, MediaType, EventException
+from server.serializers import dict_to_camel_case, dict_to_snake_case
+from models.models import Event, EventMedia, MediaType, EventException, SystemSetting
 from datetime import datetime, timezone, timedelta
 from sqlalchemy import and_
 from dateutil.rrule import rrulestr
@@ -95,28 +96,29 @@ def get_events():
                 recurrence_exception = ','.join(tokens)
 
         base_payload = {
-            "Id": str(e.id),
-            "GroupId": e.group_id,
-            "Subject": e.title,
-            "Description": getattr(e, 'description', None),
-            "StartTime": e.start.isoformat() if e.start else None,
-            "EndTime": e.end.isoformat() if e.end else None,
-            "IsAllDay": False,
-            "MediaId": e.event_media_id,
-            "Type": e.event_type.value if e.event_type else None,  # <-- Enum zu String!
-            "Icon": get_icon_for_type(e.event_type.value if e.event_type else None),
+            "id": str(e.id),
+            "group_id": e.group_id,
+            "subject": e.title,
+            "description": getattr(e, 'description', None),
+            "start_time": e.start.isoformat() if e.start else None,
+            "end_time": e.end.isoformat() if e.end else None,
+            "is_all_day": False,
+            "media_id": e.event_media_id,
+            "type": e.event_type.value if e.event_type else None,
+            "icon": get_icon_for_type(e.event_type.value if e.event_type else None),
             # Recurrence metadata
-            "RecurrenceRule": e.recurrence_rule,
-            "RecurrenceEnd": e.recurrence_end.isoformat() if e.recurrence_end else None,
-            "RecurrenceException": recurrence_exception,
-            "SkipHolidays": bool(getattr(e, 'skip_holidays', False)),
+            "recurrence_rule": e.recurrence_rule,
+            "recurrence_end": e.recurrence_end.isoformat() if e.recurrence_end else None,
+            "recurrence_exception": recurrence_exception,
+            "skip_holidays": bool(getattr(e, 'skip_holidays', False)),
         }
         result.append(base_payload)
 
         # No need to emit synthetic override events anymore since detached occurrences
         # are now real Event rows that will be returned in the main query
     session.close()
-    return jsonify(result)
+    # Convert all keys to camelCase for frontend
+    return jsonify(dict_to_camel_case(result))
 
 
 @events_bp.route("/<event_id>", methods=["GET"])  # get single event
@@ -126,25 +128,32 @@ def get_event(event_id):
         event = session.query(Event).filter_by(id=event_id).first()
         if not event:
             return jsonify({"error": "Termin nicht gefunden"}), 404
-        
         # Convert event to dictionary with all necessary fields
         event_dict = {
-            "Id": str(event.id),
-            "Subject": event.title,
-            "StartTime": event.start.isoformat() if event.start else None,
-            "EndTime": event.end.isoformat() if event.end else None,
-            "Description": event.description,
-            "Type": event.event_type.value if event.event_type else "presentation",
-            "IsAllDay": False,  # Assuming events are not all-day by default
-            "MediaId": str(event.event_media_id) if event.event_media_id else None,
-            "SlideshowInterval": event.slideshow_interval,
-            "WebsiteUrl": event.event_media.url if event.event_media and hasattr(event.event_media, 'url') else None,
-            "RecurrenceRule": event.recurrence_rule,
-            "RecurrenceEnd": event.recurrence_end.isoformat() if event.recurrence_end else None,
-            "SkipHolidays": event.skip_holidays,
-            "Icon": get_icon_for_type(event.event_type.value if event.event_type else "presentation"),
+            "id": str(event.id),
+            "subject": event.title,
+            "start_time": event.start.isoformat() if event.start else None,
+            "end_time": event.end.isoformat() if event.end else None,
+            "description": event.description,
+            "type": event.event_type.value if event.event_type else "presentation",
+            "is_all_day": False,  # Assuming events are not all-day by default
+            "media_id": str(event.event_media_id) if event.event_media_id else None,
+            "slideshow_interval": event.slideshow_interval,
+            "page_progress": event.page_progress,
+            "auto_progress": event.auto_progress,
+            "website_url": event.event_media.url if event.event_media and hasattr(event.event_media, 'url') else None,
+            # Video-specific fields
+            "autoplay": event.autoplay,
+            "loop": event.loop,
+            "volume": event.volume,
+            "muted": event.muted,
+            "recurrence_rule": event.recurrence_rule,
+            "recurrence_end": event.recurrence_end.isoformat() if event.recurrence_end else None,
+            "skip_holidays": event.skip_holidays,
+            "icon": get_icon_for_type(event.event_type.value if event.event_type else "presentation"),
         }
         
+        return jsonify(dict_to_camel_case(event_dict))
         return jsonify(event_dict)
     except Exception as e:
         return jsonify({"error": f"Fehler beim Laden des Termins: {str(e)}"}), 500
@@ -375,6 +384,40 @@ def create_event():
         session.commit()
         event_media_id = media.id
 
+    # WebUntis: URL aus System-Einstellungen holen und EventMedia anlegen
+    if event_type == "webuntis":
+        # Hole WebUntis-URL aus Systemeinstellungen (verwendet supplement_table_url)
+        webuntis_setting = session.query(SystemSetting).filter_by(key='supplement_table_url').first()
+        webuntis_url = webuntis_setting.value if webuntis_setting else ''
+        
+        if not webuntis_url:
+            return jsonify({"error": "WebUntis / Supplement table URL not configured in system settings"}), 400
+        
+        # EventMedia für WebUntis anlegen
+        media = EventMedia(
+            media_type=MediaType.website,
+            url=webuntis_url,
+            file_path=webuntis_url
+        )
+        session.add(media)
+        session.commit()
+        event_media_id = media.id
+
+    # Video: event_media_id und Video-Einstellungen übernehmen
+    autoplay = None
+    loop = None
+    volume = None
+    muted = None
+    if event_type == "video":
+        event_media_id = data.get("event_media_id")
+        if not event_media_id:
+            return jsonify({"error": "event_media_id required for video"}), 400
+        # Get video-specific settings with defaults
+        autoplay = data.get("autoplay", True)
+        loop = data.get("loop", False)
+        volume = data.get("volume", 0.8)
+        muted = data.get("muted", False)
+
     # created_by aus den Daten holen, Default: None
     created_by = data.get("created_by")
 
@@ -400,6 +443,10 @@ def create_event():
         is_active=True,
     event_media_id=event_media_id,
     slideshow_interval=slideshow_interval,
+    autoplay=autoplay,
+    loop=loop,
+    volume=volume,
+    muted=muted,
     created_by=created_by,
     # Recurrence
     recurrence_rule=data.get("recurrence_rule"),
@@ -472,6 +519,15 @@ def update_event(event_id):
     event.event_type = data.get("event_type", event.event_type)
     event.event_media_id = data.get("event_media_id", event.event_media_id)
     event.slideshow_interval = data.get("slideshow_interval", event.slideshow_interval)
+    # Video-specific fields
+    if "autoplay" in data:
+        event.autoplay = data.get("autoplay")
+    if "loop" in data:
+        event.loop = data.get("loop")
+    if "volume" in data:
+        event.volume = data.get("volume")
+    if "muted" in data:
+        event.muted = data.get("muted")
     event.created_by = data.get("created_by", event.created_by)
     # Track previous values to decide on exception regeneration
     prev_rule = event.recurrence_rule

server/routes/files.py

@@ -3,6 +3,8 @@ from server.database import Session
 from models.models import EventMedia
 import os
 
+from flask import Response, abort, session as flask_session
+
 # Blueprint for direct file downloads by media ID
 files_bp = Blueprint("files", __name__, url_prefix="/api/files")
 
@@ -66,3 +68,29 @@ def download_converted(relpath: str):
     if not os.path.isfile(abs_path):
         return jsonify({"error": "File not found"}), 404
     return send_from_directory(os.path.dirname(abs_path), os.path.basename(abs_path), as_attachment=True)
+
+
+@files_bp.route('/stream/<path:filename>')
+def stream_file(filename: str):
+    """Stream a media file via nginx X-Accel-Redirect after basic auth checks.
+
+    The nginx config must define an internal alias for /internal_media/ that
+    points to the media folder (for example: /opt/infoscreen/server/media/).
+    """
+    # Basic session-based auth: adapt to your project's auth logic if needed
+    user_role = flask_session.get('role')
+    if not user_role:
+        return abort(403)
+
+    # Normalize path to avoid directory traversal
+    safe_path = os.path.normpath('/' + filename).lstrip('/')
+    abs_path = os.path.join(MEDIA_ROOT, safe_path)
+    if not os.path.isfile(abs_path):
+        return abort(404)
+
+    # Return X-Accel-Redirect header to let nginx serve the file efficiently
+    internal_path = f'/internal_media/{safe_path}'
+    resp = Response()
+    resp.headers['X-Accel-Redirect'] = internal_path
+    # Optional: set content-type if you want (nginx can detect it)
+    return resp

server/routes/groups.py

@@ -8,7 +8,7 @@ from server.permissions import admin_or_higher, require_role
 from sqlalchemy import func
 import sys
 import os
-from datetime import datetime, timedelta
+from datetime import datetime, timedelta, timezone
 
 sys.path.append('/workspace')
 
@@ -27,6 +27,14 @@ def get_grace_period():
     return int(os.environ.get("HEARTBEAT_GRACE_PERIOD_PROD", "170"))
 
 
+def _to_utc(dt: datetime) -> datetime:
+    if dt is None:
+        return None
+    if dt.tzinfo is None:
+        return dt.replace(tzinfo=timezone.utc)
+    return dt.astimezone(timezone.utc)
+
+
 def is_client_alive(last_alive, is_active):
     """Berechnet, ob ein Client als alive gilt."""
     if not last_alive or not is_active:
@@ -42,7 +50,10 @@ def is_client_alive(last_alive, is_active):
             return False
     else:
         last_alive_dt = last_alive
-    return datetime.utcnow() - last_alive_dt <= timedelta(seconds=grace_period)
+    # Vergleiche immer in UTC und mit tz-aware Datetimes
+    last_alive_utc = _to_utc(last_alive_dt)
+    now_utc = datetime.now(timezone.utc)
+    return (now_utc - last_alive_utc) <= timedelta(seconds=grace_period)
 
 
 @groups_bp.route("", methods=["POST"])
@@ -197,3 +208,55 @@ def get_groups_with_clients():
         })
     session.close()
     return jsonify(result)
+
+
+@groups_bp.route("/order", methods=["GET"])
+def get_group_order():
+    """Retrieve the saved group order from system settings."""
+    from models.models import SystemSetting
+    session = Session()
+    try:
+        setting = session.query(SystemSetting).filter_by(key='group_order').first()
+        if setting and setting.value:
+            import json
+            order = json.loads(setting.value)
+            return jsonify({"order": order})
+        return jsonify({"order": None})
+    except Exception as e:
+        print(f"Error loading group order: {e}")
+        return jsonify({"order": None})
+    finally:
+        session.close()
+
+
+@groups_bp.route("/order", methods=["POST"])
+@require_role('admin')
+def save_group_order():
+    """Save the custom group order to system settings."""
+    from models.models import SystemSetting
+    session = Session()
+    try:
+        data = request.get_json()
+        order = data.get('order')
+        
+        if not order or not isinstance(order, list):
+            return jsonify({"success": False, "error": "Invalid order data"}), 400
+        
+        import json
+        order_json = json.dumps(order)
+        
+        setting = session.query(SystemSetting).filter_by(key='group_order').first()
+        if setting:
+            setting.value = order_json
+        else:
+            setting = SystemSetting(key='group_order', value=order_json)
+            session.add(setting)
+        
+        session.commit()
+        return jsonify({"success": True})
+    except Exception as e:
+        session.rollback()
+        print(f"Error saving group order: {e}")
+        return jsonify({"success": False, "error": str(e)}), 500
+    finally:
+        session.close()

server/routes/system_settings.py

@@ -5,7 +5,7 @@ Provides key-value storage for system-wide configuration.
 from flask import Blueprint, jsonify, request
 from server.database import Session
 from models.models import SystemSetting
-from server.permissions import admin_or_higher
+from server.permissions import admin_or_higher, superadmin_only
 from sqlalchemy.exc import SQLAlchemyError
 
 system_settings_bp = Blueprint('system_settings', __name__, url_prefix='/api/system-settings')
@@ -31,11 +31,10 @@ def get_all_settings():
 
 
 @system_settings_bp.route('/<key>', methods=['GET'])
-@admin_or_higher
 def get_setting(key):
     """
     Get a specific system setting by key.
-    Admin+ only.
+    Public endpoint - settings are read-only configuration.
     """
     session = Session()
     try:
@@ -173,7 +172,7 @@ def update_supplement_table_settings():
             url_setting = SystemSetting(
                 key='supplement_table_url',
                 value=url,
-                description='URL für Vertretungsplan (Stundenplan-Änderungstabelle)'
+                description='URL für Vertretungsplan / WebUntis (Stundenplan-Änderungstabelle)'
             )
             session.add(url_setting)
         
@@ -201,3 +200,130 @@ def update_supplement_table_settings():
         return jsonify({'error': str(e)}), 500
     finally:
         session.close()
+
+
+@system_settings_bp.route('/holiday-banner', methods=['GET'])
+def get_holiday_banner_setting():
+    """
+    Get holiday banner enabled status.
+    Public endpoint - dashboard needs this.
+    """
+    session = Session()
+    try:
+        setting = session.query(SystemSetting).filter_by(key='holiday_banner_enabled').first()
+        enabled = setting.value == 'true' if setting else True
+        
+        return jsonify({'enabled': enabled}), 200
+    except SQLAlchemyError as e:
+        return jsonify({'error': str(e)}), 500
+    finally:
+        session.close()
+
+
+@system_settings_bp.route('/holiday-banner', methods=['POST'])
+@admin_or_higher
+def update_holiday_banner_setting():
+    """
+    Update holiday banner enabled status.
+    Admin+ only.
+    
+    Request body:
+    {
+        "enabled": true/false
+    }
+    """
+    session = Session()
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        enabled = data.get('enabled', True)
+        
+        # Update or create setting
+        setting = session.query(SystemSetting).filter_by(key='holiday_banner_enabled').first()
+        if setting:
+            setting.value = 'true' if enabled else 'false'
+        else:
+            setting = SystemSetting(
+                key='holiday_banner_enabled',
+                value='true' if enabled else 'false',
+                description='Ferienstatus-Banner auf Dashboard anzeigen'
+            )
+            session.add(setting)
+        
+        session.commit()
+        
+        return jsonify({
+            'enabled': enabled,
+            'message': 'Holiday banner setting updated successfully'
+        }), 200
+    except SQLAlchemyError as e:
+        session.rollback()
+        return jsonify({'error': str(e)}), 500
+    finally:
+        session.close()
+
+
+@system_settings_bp.route('/organization-name', methods=['GET'])
+def get_organization_name():
+    """
+    Get organization name.
+    Public endpoint - header needs this.
+    """
+    session = Session()
+    try:
+        setting = session.query(SystemSetting).filter_by(key='organization_name').first()
+        name = setting.value if setting and setting.value else ''
+        
+        return jsonify({'name': name}), 200
+    except SQLAlchemyError as e:
+        return jsonify({'error': str(e)}), 500
+    finally:
+        session.close()
+
+
+@system_settings_bp.route('/organization-name', methods=['POST'])
+@superadmin_only
+def update_organization_name():
+    """
+    Update organization name.
+    Superadmin only.
+    
+    Request body:
+    {
+        "name": "Meine Organisation"
+    }
+    """
+    session = Session()
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        name = data.get('name', '')
+        
+        # Update or create setting
+        setting = session.query(SystemSetting).filter_by(key='organization_name').first()
+        if setting:
+            setting.value = name
+        else:
+            setting = SystemSetting(
+                key='organization_name',
+                value=name,
+                description='Name der Organisation (wird im Header angezeigt)'
+            )
+            session.add(setting)
+        
+        session.commit()
+        
+        return jsonify({
+            'name': name,
+            'message': 'Organization name updated successfully'
+        }), 200
+    except SQLAlchemyError as e:
+        session.rollback()
+        return jsonify({'error': str(e)}), 500
+    finally:
+        session.close()
+

server/routes/users.py

@@ -0,0 +1,439 @@
+"""
+User management routes.
+
+This module provides endpoints for managing users (CRUD operations).
+Access is role-based: admin can manage user/editor/admin, superadmin can manage all.
+"""
+
+from flask import Blueprint, request, jsonify, session
+from server.database import Session
+from models.models import User, UserRole
+from server.permissions import require_role, superadmin_only
+import bcrypt
+import sys
+from datetime import datetime, timezone
+
+sys.path.append('/workspace')
+
+users_bp = Blueprint("users", __name__, url_prefix="/api/users")
+
+
+@users_bp.route("", methods=["GET"])
+@require_role('admin', 'superadmin')
+def list_users():
+    """
+    List all users (filtered by current user's role).
+    
+    Admin: sees user, editor, admin
+    Superadmin: sees all including superadmin
+    
+    Returns:
+        200: [
+            {
+                "id": int,
+                "username": "string",
+                "role": "string",
+                "isActive": boolean,
+                "createdAt": "ISO8601",
+                "updatedAt": "ISO8601"
+            }
+        ]
+    """
+    db_session = Session()
+    try:
+        current_role = session.get('role')
+        
+        query = db_session.query(User)
+        
+        # Admin cannot see superadmin users
+        if current_role == 'admin':
+            query = query.filter(User.role.in_([UserRole.user, UserRole.editor, UserRole.admin]))
+        
+        users = query.order_by(User.username).all()
+        
+        result = []
+        for user in users:
+            result.append({
+                "id": user.id,
+                "username": user.username,
+                "role": user.role.value,
+                "isActive": user.is_active,
+                "lastLoginAt": user.last_login_at.isoformat() if user.last_login_at else None,
+                "lastPasswordChangeAt": user.last_password_change_at.isoformat() if user.last_password_change_at else None,
+                "failedLoginAttempts": user.failed_login_attempts,
+                "createdAt": user.created_at.isoformat() if user.created_at else None,
+                "updatedAt": user.updated_at.isoformat() if user.updated_at else None
+            })
+        
+        return jsonify(result), 200
+        
+    finally:
+        db_session.close()
+
+
+@users_bp.route("", methods=["POST"])
+@require_role('admin', 'superadmin')
+def create_user():
+    """
+    Create a new user.
+    
+    Admin: can create user, editor, admin
+    Superadmin: can create any role including superadmin
+    
+    Request body:
+        {
+            "username": "string",
+            "password": "string",
+            "role": "user|editor|admin|superadmin",
+            "isActive": boolean (optional, default true)
+        }
+    
+    Returns:
+        201: {
+            "id": int,
+            "username": "string",
+            "role": "string",
+            "isActive": boolean,
+            "message": "User created successfully"
+        }
+        400: {"error": "Validation error"}
+        403: {"error": "Permission denied"}
+        409: {"error": "Username already exists"}
+    """
+    data = request.get_json()
+    
+    if not data:
+        return jsonify({"error": "Request body required"}), 400
+    
+    username = data.get("username", "").strip()
+    password = data.get("password", "")
+    role_str = data.get("role", "user")
+    is_active = data.get("isActive", True)
+    
+    # Validation
+    if not username:
+        return jsonify({"error": "Username is required"}), 400
+    
+    if len(username) < 3:
+        return jsonify({"error": "Username must be at least 3 characters"}), 400
+    
+    if not password:
+        return jsonify({"error": "Password is required"}), 400
+    
+    if len(password) < 6:
+        return jsonify({"error": "Password must be at least 6 characters"}), 400
+    
+    # Check if role is valid
+    try:
+        new_role = UserRole[role_str]
+    except KeyError:
+        return jsonify({"error": f"Invalid role: {role_str}"}), 400
+    
+    # Check permissions: admin cannot create superadmin
+    current_role = session.get('role')
+    if current_role == 'admin' and new_role == UserRole.superadmin:
+        return jsonify({"error": "Admin cannot create superadmin accounts"}), 403
+    
+    db_session = Session()
+    try:
+        # Check if username already exists
+        existing = db_session.query(User).filter_by(username=username).first()
+        if existing:
+            return jsonify({"error": "Username already exists"}), 409
+        
+        # Hash password
+        password_hash = bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')
+        
+        # Create user
+        new_user = User(
+            username=username,
+            password_hash=password_hash,
+            role=new_role,
+            is_active=is_active
+        )
+        
+        db_session.add(new_user)
+        db_session.commit()
+        
+        return jsonify({
+            "id": new_user.id,
+            "username": new_user.username,
+            "role": new_user.role.value,
+            "isActive": new_user.is_active,
+            "message": "User created successfully"
+        }), 201
+        
+    finally:
+        db_session.close()
+
+
+@users_bp.route("/<int:user_id>", methods=["GET"])
+@require_role('admin', 'superadmin')
+def get_user(user_id):
+    """
+    Get a single user by ID.
+    
+    Admin: cannot get superadmin users
+    Superadmin: can get any user
+    
+    Returns:
+        200: {
+            "id": int,
+            "username": "string",
+            "role": "string",
+            "isActive": boolean,
+            "createdAt": "ISO8601",
+            "updatedAt": "ISO8601"
+        }
+        403: {"error": "Permission denied"}
+        404: {"error": "User not found"}
+    """
+    db_session = Session()
+    try:
+        user = db_session.query(User).filter_by(id=user_id).first()
+        
+        if not user:
+            return jsonify({"error": "User not found"}), 404
+        
+        # Admin cannot view superadmin users
+        current_role = session.get('role')
+        if current_role == 'admin' and user.role == UserRole.superadmin:
+            return jsonify({"error": "Permission denied"}), 403
+        
+        return jsonify({
+            "id": user.id,
+            "username": user.username,
+            "role": user.role.value,
+            "isActive": user.is_active,
+            "lastLoginAt": user.last_login_at.isoformat() if user.last_login_at else None,
+            "lastPasswordChangeAt": user.last_password_change_at.isoformat() if user.last_password_change_at else None,
+            "lastFailedLoginAt": user.last_failed_login_at.isoformat() if user.last_failed_login_at else None,
+            "failedLoginAttempts": user.failed_login_attempts,
+            "lockedUntil": user.locked_until.isoformat() if user.locked_until else None,
+            "deactivatedAt": user.deactivated_at.isoformat() if user.deactivated_at else None,
+            "createdAt": user.created_at.isoformat() if user.created_at else None,
+            "updatedAt": user.updated_at.isoformat() if user.updated_at else None
+        }), 200
+        
+    finally:
+        db_session.close()
+
+
+@users_bp.route("/<int:user_id>", methods=["PUT"])
+@require_role('admin', 'superadmin')
+def update_user(user_id):
+    """
+    Update a user's details.
+    
+    Admin: cannot edit superadmin users, cannot assign superadmin role
+    Superadmin: can edit any user
+    
+    Restrictions:
+    - Cannot change own role
+    - Cannot change own active status
+    
+    Request body:
+        {
+            "username": "string" (optional),
+            "role": "string" (optional),
+            "isActive": boolean (optional)
+        }
+    
+    Returns:
+        200: {
+            "id": int,
+            "username": "string",
+            "role": "string",
+            "isActive": boolean,
+            "message": "User updated successfully"
+        }
+        400: {"error": "Validation error"}
+        403: {"error": "Permission denied"}
+        404: {"error": "User not found"}
+        409: {"error": "Username already exists"}
+    """
+    data = request.get_json()
+    
+    if not data:
+        return jsonify({"error": "Request body required"}), 400
+    
+    current_user_id = session.get('user_id')
+    current_role = session.get('role')
+    
+    db_session = Session()
+    try:
+        user = db_session.query(User).filter_by(id=user_id).first()
+        
+        if not user:
+            return jsonify({"error": "User not found"}), 404
+        
+        # Admin cannot edit superadmin users
+        if current_role == 'admin' and user.role == UserRole.superadmin:
+            return jsonify({"error": "Cannot edit superadmin users"}), 403
+        
+        # Update username if provided
+        if "username" in data:
+            new_username = data["username"].strip()
+            if new_username and new_username != user.username:
+                if len(new_username) < 3:
+                    return jsonify({"error": "Username must be at least 3 characters"}), 400
+                
+                # Check if username already exists
+                existing = db_session.query(User).filter(
+                    User.username == new_username,
+                    User.id != user_id
+                ).first()
+                if existing:
+                    return jsonify({"error": "Username already exists"}), 409
+                
+                user.username = new_username
+        
+        # Update role if provided
+        if "role" in data:
+            role_str = data["role"]
+            
+            # Cannot change own role
+            if user_id == current_user_id:
+                return jsonify({"error": "Cannot change your own role"}), 403
+            
+            try:
+                new_role = UserRole[role_str]
+            except KeyError:
+                return jsonify({"error": f"Invalid role: {role_str}"}), 400
+            
+            # Admin cannot assign superadmin role
+            if current_role == 'admin' and new_role == UserRole.superadmin:
+                return jsonify({"error": "Cannot assign superadmin role"}), 403
+            
+            user.role = new_role
+        
+        # Update active status if provided
+        if "isActive" in data:
+            # Cannot deactivate own account
+            if user_id == current_user_id:
+                return jsonify({"error": "Cannot deactivate your own account"}), 403
+            
+            new_status = bool(data["isActive"])
+            user.is_active = new_status
+            
+            # Track deactivation
+            if not new_status and not user.deactivated_at:
+                user.deactivated_at = datetime.now(timezone.utc)
+                user.deactivated_by = current_user_id
+        
+        db_session.commit()
+        
+        return jsonify({
+            "id": user.id,
+            "username": user.username,
+            "role": user.role.value,
+            "isActive": user.is_active,            "lastLoginAt": None,
+            "lastPasswordChangeAt": None,
+            "failedLoginAttempts": 0,            "lastLoginAt": user.last_login_at.isoformat() if user.last_login_at else None,
+            "lastPasswordChangeAt": user.last_password_change_at.isoformat() if user.last_password_change_at else None,
+            "failedLoginAttempts": user.failed_login_attempts,
+            "message": "User updated successfully"
+        }), 200
+        
+    finally:
+        db_session.close()
+
+
+@users_bp.route("/<int:user_id>/password", methods=["PUT"])
+@require_role('admin', 'superadmin')
+def reset_password(user_id):
+    """
+    Reset a user's password.
+    
+    Admin: cannot reset superadmin passwords
+    Superadmin: can reset any password
+    
+    Request body:
+        {
+            "password": "string"
+        }
+    
+    Returns:
+        200: {"message": "Password reset successfully"}
+        400: {"error": "Validation error"}
+        403: {"error": "Permission denied"}
+        404: {"error": "User not found"}
+    """
+    data = request.get_json()
+    
+    if not data:
+        return jsonify({"error": "Request body required"}), 400
+    
+    password = data.get("password", "")
+    
+    if not password:
+        return jsonify({"error": "Password is required"}), 400
+    
+    if len(password) < 6:
+        return jsonify({"error": "Password must be at least 6 characters"}), 400
+    
+    current_role = session.get('role')
+    current_user_id = session.get('user_id')
+    
+    db_session = Session()
+    try:
+        user = db_session.query(User).filter_by(id=user_id).first()
+        
+        if not user:
+            return jsonify({"error": "User not found"}), 404
+
+        # Users must change their own password via /auth/change-password (requires current password)
+        if user.id == current_user_id:
+            return jsonify({"error": "Use /api/auth/change-password to change your own password"}), 403
+        
+        # Admin cannot reset superadmin passwords
+        if current_role == 'admin' and user.role == UserRole.superadmin:
+            return jsonify({"error": "Cannot reset superadmin passwords"}), 403
+        
+        # Hash new password and update timestamp
+        password_hash = bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')
+        user.password_hash = password_hash
+        user.last_password_change_at = datetime.now(timezone.utc)
+        
+        db_session.commit()
+        
+        return jsonify({"message": "Password reset successfully"}), 200
+        
+    finally:
+        db_session.close()
+
+
+@users_bp.route("/<int:user_id>", methods=["DELETE"])
+@superadmin_only
+def delete_user(user_id):
+    """
+    Permanently delete a user (superadmin only).
+    
+    Cannot delete own account.
+    
+    Returns:
+        200: {"message": "User deleted successfully"}
+        403: {"error": "Cannot delete your own account"}
+        404: {"error": "User not found"}
+    """
+    current_user_id = session.get('user_id')
+    
+    # Cannot delete own account
+    if user_id == current_user_id:
+        return jsonify({"error": "Cannot delete your own account"}), 403
+    
+    db_session = Session()
+    try:
+        user = db_session.query(User).filter_by(id=user_id).first()
+        
+        if not user:
+            return jsonify({"error": "User not found"}), 404
+        
+        username = user.username  # Store for message
+        db_session.delete(user)
+        db_session.commit()
+        
+        return jsonify({"message": f"User '{username}' deleted successfully"}), 200
+        
+    finally:
+        db_session.close()

server/serializers.py

@@ -0,0 +1,74 @@
+"""
+Serialization helpers for converting between Python snake_case and JavaScript camelCase.
+"""
+import re
+from typing import Any, Dict, List, Union
+
+
+def to_camel_case(snake_str: str) -> str:
+    """
+    Convert snake_case string to camelCase.
+    
+    Examples:
+        event_type -> eventType
+        start_time -> startTime
+        is_active -> isActive
+    """
+    components = snake_str.split('_')
+    # Keep the first component as-is, capitalize the rest
+    return components[0] + ''.join(word.capitalize() for word in components[1:])
+
+
+def to_snake_case(camel_str: str) -> str:
+    """
+    Convert camelCase string to snake_case.
+    
+    Examples:
+        eventType -> event_type
+        startTime -> start_time
+        isActive -> is_active
+    """
+    # Insert underscore before uppercase letters and convert to lowercase
+    snake = re.sub('([A-Z])', r'_\1', camel_str).lower()
+    # Remove leading underscore if present
+    return snake.lstrip('_')
+
+
+def dict_to_camel_case(data: Union[Dict, List, Any]) -> Union[Dict, List, Any]:
+    """
+    Recursively convert dictionary keys from snake_case to camelCase.
+    Also handles lists of dictionaries.
+    
+    Args:
+        data: Dictionary, list, or primitive value to convert
+        
+    Returns:
+        Converted data structure with camelCase keys
+    """
+    if isinstance(data, dict):
+        return {to_camel_case(key): dict_to_camel_case(value) 
+                for key, value in data.items()}
+    elif isinstance(data, list):
+        return [dict_to_camel_case(item) for item in data]
+    else:
+        return data
+
+
+def dict_to_snake_case(data: Union[Dict, List, Any]) -> Union[Dict, List, Any]:
+    """
+    Recursively convert dictionary keys from camelCase to snake_case.
+    Also handles lists of dictionaries.
+    
+    Args:
+        data: Dictionary, list, or primitive value to convert
+        
+    Returns:
+        Converted data structure with snake_case keys
+    """
+    if isinstance(data, dict):
+        return {to_snake_case(key): dict_to_snake_case(value) 
+                for key, value in data.items()}
+    elif isinstance(data, list):
+        return [dict_to_snake_case(item) for item in data]
+    else:
+        return data

server/wsgi.py

@@ -9,6 +9,7 @@ from server.routes.academic_periods import academic_periods_bp
 from server.routes.groups import groups_bp
 from server.routes.clients import clients_bp
 from server.routes.auth import auth_bp
+from server.routes.users import users_bp
 from server.routes.system_settings import system_settings_bp
 from server.database import Session, engine
 from flask import Flask, jsonify, send_from_directory, request
@@ -19,6 +20,10 @@ sys.path.append('/workspace')
 
 app = Flask(__name__)
 
+# Allow uploads up to 1 GiB at the Flask level (application hard limit)
+# See nginx.conf for proxy limit; keep both in sync.
+app.config['MAX_CONTENT_LENGTH'] = 1 * 1024 * 1024 * 1024  # 1 GiB
+
 # Configure Flask session
 # In production, use a secure random key from environment variable
 app.config['SECRET_KEY'] = os.environ.get('FLASK_SECRET_KEY', 'dev-secret-key-change-in-production')
@@ -39,6 +44,7 @@ else:
 # Blueprints importieren und registrieren
 
 app.register_blueprint(auth_bp)
+app.register_blueprint(users_bp)
 app.register_blueprint(clients_bp)
 app.register_blueprint(groups_bp)
 app.register_blueprint(events_bp)