# Product Updates Admin Panel Features

**Last Updated**: 2026-04-08  
**Status**: Production Ready ✅

## Overview

The Product Updates Admin Panel is a comprehensive content management system for managing product feature announcements and improvements. This document provides a complete feature list and explains how each feature works.

### Editor: drafts, scheduling, autosave (2026-04)

- **Entwurf speichern** / **Veröffentlichen / Planen** set `save_intent` and `publication_status` on the server; future **`published_date`** values schedule items (hidden until that calendar day in **Europe/Berlin**; see visibility helper).
- **Status badges** in the modal header follow stored `publication_status` + date vs today.
- **List filters** (All / Entwurf / Geplant / Live) use `data-feature-pub` / `data-improvement-pub`.
- **Unsaved changes**: confirm on close (backdrop, X, Cancel) and `beforeunload` when the modal is dirty.
- **Autosave**: debounced `POST /v2/api/produkt-updates-autosave.php` (~3s idle, max flush ~35s, flush on blur); `AbortController` cancels in-flight requests; client `client_revision` matches responses to avoid applying stale saves. While the modal is in **add** mode (`featureAction` / `improvementAction` = `add_*`), the client always sends **empty `id`** so a leftover hidden id cannot trigger “not found”; the API then creates a **draft** stub (`publication_status: draft`) and returns the new id (form switches to `edit_*`). Closing the modal clears `featureId` / `improvementId` and resets action to `add_*`. Quill→textarea sync registers **only** its own `text-change` listener (never `off('text-change')` without a handler), so `setContent` after open/edit does not detach dirty/autosave hooks. On success, **`window.puAdminFeaturesCache` / `window.puAdminImprovementsCache`** are updated from the current form so reopening the modal without a full page reload matches disk; list cards/table rows get title/description filter attributes refreshed when possible.
- Shared PHP: `v2/includes/produkt-updates-save-updates-data.php`, `v2/includes/produkt-updates-regenerate-months.php`, `v2/includes/produkt-updates-quill-input-sanitize.php`.
- **Bootstrap contract:** After login, the admin loads SSOT JSON and runs migrations only **after** `require_once` of `produkt-updates-save-updates-data.php` (so `saveUpdatesData()` and `regenerateMonthsFromContent()` exist). Quill field sanitizers are loaded before POST handling. Other endpoints must not `require` the full admin page for helpers—include those files directly (see diagnostics helpers).

## Authentication & Security

### Login System

**Primary (when `GOOGLE_OAUTH_CLIENT_ID` / `GOOGLE_OAUTH_CLIENT_SECRET` are set and OAuth is not disabled):**

- **Google OAuth** — “Sign in with Google”; only **verified @ordio.com** accounts (server-side check after userinfo).
- Routes: `/produkt-updates-admin/oauth/google` → `/produkt-updates-admin/oauth/callback`.
- Full detail: [PRODUCT_UPDATES_ADMIN_OAUTH.md](PRODUCT_UPDATES_ADMIN_OAUTH.md).

**Legacy (fallback):**

- Set `PRODUCT_UPDATES_ADMIN_OAUTH_ENABLED=0` (or leave Google unset) and provide **`PRODUCT_UPDATES_ADMIN_LEGACY_PASSWORD_HASH`** (bcrypt, env only — no hash committed in `admin_config.php`).
- **Stay signed in** (optional checkbox): selector+verifier token in SSOT data dir (hashed server-side); works for **both** Google OAuth and legacy password. See [PRODUCT_UPDATES_ADMIN_OAUTH.md](PRODUCT_UPDATES_ADMIN_OAUTH.md) § Remember me.

**Common:**

- Session-based authentication; timeout 30 minutes of inactivity (remember-me restores the session when the checkbox was used).
- Login attempt limiting for password mode (5 attempts → 15-minute lockout).
- Session ID regeneration on successful login (password and OAuth).
- Secure session cookies via `v2/includes/produkt-updates-admin-session.php` (HttpOnly, SameSite=Lax, Secure when HTTPS).

### Access Control

- **@ordio.com** team members via Google when OAuth is active.
- Session flag `produkt_updates_admin_authenticated` gates APIs (`produkt-updates-upload.php`, `produkt-updates-autosave.php`, etc.).
- Automatic logout on timeout; manual logout clears OAuth email session key and revokes the current remember-me token.

## Dashboard Section

### Current Month Card

**Purpose**: Quick overview of the active month's status

**Displays**:

- Month name and published date
- Number of big features
- Number of small improvements
- Status indicator (needs attention if empty)

**Conditional Rendering**: Only shows if `$current_month_data` exists and has content

### Insights Card

**Purpose**: Statistical overview of content

**Displays**:

- Total months count
- Total features count
- Total improvements count
- Activity summary

**Conditional Rendering**: Only shows if `$month_count > 0`

### Activity Trends Chart

**Purpose**: Visual representation of content activity over time

**Technology**: Chart.js (line chart)

**Displays**:

- Monthly activity timeline
- Features and improvements count per month
- Trend visualization

**Conditional Rendering**: Only shows if `count($chart_labels) > 0`

**Data Source**: Aggregated from all months in JSON data

### Recent Activity Feed

**Purpose**: Chronological list of recent updates

**Displays**:

- Recent features (sorted by published_date, newest first)
- Recent improvements (sorted by published_date, newest first)
- Quick actions (edit, preview, delete)

**Features**:

- Real-time updates after saves
- Direct links to edit forms
- Preview links to public pages

## Months Management Section

### Month List

**Features**:

- All months sorted by published_date (newest first)
- Expandable/collapsible month sections
- Month metadata display (slug, published_date, intro_text)
- Quick actions (edit, delete, preview)

### Add New Month

**Form Fields**:

- Month Name (e.g., "November 2025")
- Month Slug (auto-generated from name, editable)
- Published Date (date picker)
- Intro Text (rich text editor)

**Validation**:

- Required fields: Month Name, Slug, Published Date
- Slug format validation (lowercase, hyphens, alphanumeric)
- Duplicate slug prevention
- Date validation (not in future)

**Auto-Features**:

- Auto-generates slug from month name
- Auto-creates month when feature/improvement is added with date

### Edit Month

**Features**:

- Pre-populated form with existing data
- Update all fields
- Auto-updates current_month if date changes
- Maintains all associated features and improvements

### Delete Month

**Features**:

- Confirmation dialog before deletion
- Cascading delete (removes all features and improvements)
- Image cleanup (deletes associated images)
- Auto-regenerates months list

### Current Month Management

**Logic**:

- Current month determined by most recent published_date
- Automatically updates when new month is added
- Can be changed by editing month's published_date

## Features Management Section

### Big Features List

**Display**:

- Features grouped by month
- Sorted by published_date (newest first)
- Search and filter functionality
- Bulk selection checkboxes

**Features**:

- Expandable month sections
- Quick view of feature metadata
- Platform icons (Desktop/Mobile)
- Tag badges (Neues Feature, Verbesserung, Bugfix)
- Featured image thumbnails

### Add Feature

**Form Fields**:

- Title (required)
- Description (rich text editor, Quill.js)
- Page Content (rich text editor, Quill.js) - full content for individual page
- Read More Link (slug for individual page, required)
- Published Date (required)
- Tag (dropdown: Neues Feature, Verbesserung, Bugfix, etc.)
- Platforms (checkboxes: Desktop, Mobile)
- Featured Image (image upload or library selection)

**Rich Text Editor Features**:

- Bold, Italic, Underline
- Blockquote (for quotes/callouts)
- Headings (H1, H2, H3)
- Bulleted and numbered lists
- Links with URL validation (external links get target="_blank" rel="noopener noreferrer")
- Line breaks
- **Images**: Upload via toolbar; inserts via produkt-updates-upload API
- **Video/Embeds**: YouTube and Vimeo URLs; converts to embed iframe (allowed domains: youtube.com, youtu.be, vimeo.com, ordio.com)

**Image Upload**:

- Single or multiple file selection
- Automatic optimization (resize, compress, WebP conversion)
- Image library integration
- Preview before selection

**Validation**:

- Required fields validation
- Slug format validation
- URL validation for links
- Date validation
- Image format and size validation

**Auto-Features**:

- Auto-generates ID
- Auto-assigns to month based on published_date
- Auto-creates month if doesn't exist
- Auto-numbers features within month

### Edit Feature

**Features**:

- Pre-populated form with existing data
- Update all fields
- Change month assignment (via published_date)
- Update featured image
- Remove featured image

**Special Handling**:

- Month migration (if published_date changes, moves to new month)
- Image cleanup (deletes old image if replaced)
- Auto-reorganization by date

### Delete Feature

**Features**:

- Confirmation dialog
- Deletes featured image file
- Removes from month's features list
- Auto-cleanup of empty months

### Duplicate Feature

**Features**:

- Copy feature to another month
- Select target month (via published_date)
- Creates new ID
- Shares featured image (not duplicated physically)
- Auto-creates target month if doesn't exist

### Bulk Operations

**Select Multiple**:

- Checkbox selection per feature
- "Select All" checkbox
- Bulk actions bar appears when items selected

**Bulk Delete**:

- Delete multiple features at once
- Confirmation dialog with count
- Cascading image deletion

**Bulk Update Platforms**:

- Set platforms for multiple features
- Single operation updates all selected

**Bulk Update Date**:

- Set published_date for multiple features
- Auto-migrates to correct month
- Maintains relative ordering

### Search and Filter

**Features**:

- Real-time search in titles and descriptions
- Case-insensitive matching
- Highlights matching text
- Clear search button
- Per-section search (features, improvements)

## Improvements Management Section

### Small Improvements List

**Display**:

- Improvements grouped by month
- Sorted by published_date (newest first)
- Compact card layout
- Numbered list (#1, #2, etc.)

**Features**:

- Same management features as features (add, edit, delete, duplicate, bulk operations)
- Simplified form (no page_content field)
- Single featured image (not multiple)

### Add Improvement

**Form Fields**:

- Title (required)
- Description (rich text editor)
- Published Date (optional - uses month's date if not set)
- Platforms (checkboxes: Desktop, Mobile)
- Featured Image (single image upload)

**Differences from Features**:

- No page_content field (no individual page)
- No read_more_link field
- Simpler form

### Edit/Delete/Duplicate Improvement

Same functionality as features, adapted for improvements structure.

## Image Management

### Image Upload

**Features**:

- Drag-and-drop support
- Multiple file selection
- Progress indicators
- Automatic optimization:
  - Resize to max 1920x1920px
  - JPEG compression (quality 85)
  - PNG compression (level 6)
  - WebP conversion when possible
  - File size reduction (30-70%)

**Validation**:

- File type (JPEG, PNG, WebP, GIF only)
- File size (5MB max per file)
- Dimensions (4000x4000px max)
- MIME type validation
- Image integrity check

**Storage**:

- Saved to persistent WordPress uploads directory
- Returns proxy URL for use in JSON
- Automatic filename generation (unique)

### Image Library

**Implementation note**: The grid loads from `GET /v2/api/produkt-updates-diagnostics.php` with `refresh_images=1` (skips the PHP temp file cache for `listExistingImages()`, `Cache-Control: no-store` on that request). The client uses `fetch(..., { cache: 'no-store' })` for diagnostics and `produkt-updates-get-image-usage.php` (also `no-store`). `listExistingImages()` uses a ~5 minute temp cache for other callers; that cache is cleared on **image upload** and **library delete** via `invalidateProduktUpdatesImageCache()` in `v2/includes/produkt-updates-paths.php`. New image-writing endpoints should call that helper after writes.

**Features**:

- Browse all previously uploaded images
- View thumbnails
- Select image to reuse
- Shows image metadata (size, dimensions)
- Search functionality (planned)

**Benefits**:

- Reuse images without re-uploading
- Saves storage space
- Faster workflow

### Image Deletion

**Automatic**:

- Deleted when feature/improvement is deleted
- Deleted when replaced with new image

**Manual**:

- Delete from edit form
- Bulk delete unused images (planned)

## Settings Section

### Storage Status

**Displays**:

- Current data file location
- Current image directory location
- Persistence status (persistent vs volatile)
- Warnings if using volatile storage
- Migration options if needed

**Features**:

- Real-time status check
- Links to migration scripts
- Health indicators

### Display Limits

**Settings**:

- Max Big Features (default: 5)
- Max Small Improvements (default: 10)

**Purpose**: Control how many items show on main public page

### Main Page Settings

**Settings**:

- Main Page Title (supports blue markup: `*text*` and `**text**`)
- Main Page Intro Text (rich text)

**Purpose**: Customize main `/produkt-updates` page content

### Discovery Files

**Features**:

- Regenerate Sitemap button
- Regenerate LLMS files button
- Auto-regeneration status (currently disabled)

**Purpose**: Update SEO discovery files after content changes

## Search and Navigation

### Global Search

**Features**:

- Search across all features and improvements
- Real-time results
- Highlights matching text
- Clear search button

### Section Navigation

**Sections**:

- Dashboard (#dashboard)
- Months (#months)
- Features (#features)
- Improvements (#improvements)
- Settings (#settings)

**Features**:

- Hash-based navigation
- Active section highlighting
- Smooth scrolling
- URL preservation

### Keyboard Shortcuts

**Implemented**:

- `Esc`: Close modal/dialog
- `Delete`: Delete selected items (when items selected)

**Planned**:

- `Ctrl+S`: Save current form
- `Ctrl+N`: Create new item

## Preview Functionality

### Preview Main Page

**Features**:

- Opens `/produkt-updates` in new tab
- Shows current published content
- Real-time preview after saves

### Preview Month Page

**Features**:

- Opens `/produkt-updates/[month-slug]` in new tab
- Shows month's content
- Includes all features and improvements

### Preview Individual Feature

**Features**:

- Opens `/produkt-updates/[feature-slug]` in new tab
- Shows full feature page
- Includes hero image and full content

## Data Management

### Auto-Save

**Features**:

- Automatic save on form submission
- Atomic file writes (temp file + rename)
- Backup before bulk operations
- Error handling with rollback

### Data Validation

**Features**:

- JSON structure validation
- Required fields validation
- Data type validation
- Date format validation
- URL validation

### Data Backup

**Features**:

- Automatic backup before bulk operations
- Manual backup option (planned)
- Backup location: `v2/data/backups/`

## Error Handling

### User-Friendly Messages

**Features**:

- Clear error messages
- Actionable suggestions
- Context-aware help text

### Error Logging

**Features**:

- Daily log files (`v2/logs/produkt_updates_admin_YYYY-MM-DD.log`)
- Structured logging
- Error context preservation
- Debug information

### Toast Notifications

**Types**:

- Success (green)
- Error (red)
- Warning (yellow)
- Info (blue)

**Features**:

- Auto-dismiss after 5 seconds
- Manual dismiss option
- Stack multiple notifications

## Performance Features

### Lazy Loading

**Features**:

- Images lazy-loaded on public pages
- Modal content loaded on demand
- Chart data loaded on dashboard view

### Caching

**Features**:

- JSON data cached in memory during request
- Discovery files cached until regeneration
- Browser caching for static assets

### Optimization

**Features**:

- Image optimization on upload
- Minified JavaScript and CSS
- CDN for external libraries

## Related Documentation

- [User Guide](../v2/admin/produkt-updates/USER_GUIDE.md) - Step-by-step user instructions
- [Code Documentation](../v2/admin/produkt-updates/CODE_DOCUMENTATION.md) - Developer documentation
- [System Overview](./PRODUCT_UPDATES_SYSTEM_OVERVIEW.md) - High-level architecture
- [Development Guide](./PRODUCT_UPDATES_DEVELOPMENT_GUIDE.md) - How to extend features