feat(frontend): responsive digital menu board and media signage player web page #591

Overview

Create a standalone, full-screen Next.js route (/menu-board) capable of running on TV browsers, tablets, and second monitors. It renders dynamic POS menus, promotional media loops, or split-screen views with live out-of-stock updates.

Technical Specification

1. Route & Navigation (frontend/src/app/menu-board/page.tsx)

• Accessed via http://<pos-ip>:3001/menu-board?channel=<channel_id>.
• Supports public/kiosk access without requiring cashier credentials (authenticated via channel token or open LAN policy matching KDS mode).

2. Layout Modes (Driven by layout_config)

• Mode A: Dynamic Menu Board (Full-screen)
  • Multi-column category grid (2 to 4 columns depending on screen width/orientation).
  • Item card rendering: Name, description, formatted price, allergen/dietary tags, and high-contrast styling.
  • Live stock state: Out-of-stock items are visually badged or hidden based on channel configuration.
  • Auto-pagination: If items exceed screen real estate, smoothly transition/page between category sets on a configurable timer (e.g. every 10 seconds).
• Mode B: Media Player (Full-screen)
  • Full-screen HTML5 video player and image carousel.
  • Seamless loop with crossfade transitions between slides.
  • Autoplay video with muted attribute (ensuring TV browsers do not block playback).
• Mode C: Hybrid Split-Screen
  • Configurable split ratio (e.g., 70% Menu Board on the left, 30% Promo Video/Special Offers banner on the right, or 75/25 horizontal split).

3. Real-Time Updates & Offline Caching

• Poll or listen to WebSocket notifications for menu changes (price edits, sold-out toggles).
• Cache the latest channel configuration and product catalog in browser localStorage. If the network connection drops momentarily, continue rendering the cached menu without showing an error overlay.

Tasks

• Create frontend/src/app/menu-board/page.tsx with responsive layout for 1080p, 4K, and portrait aspect ratios.
• Implement frontend/src/components/menu-board/MenuGrid.tsx for dynamic category and item rendering.
• Implement frontend/src/components/menu-board/MediaLoop.tsx with seamless video and image transitions.
• Implement frontend/src/components/menu-board/HybridLayout.tsx for split-screen layouts.
• Add offline local storage fallback cache for uninterrupted 24/7 TV playback.

Acceptance Criteria

• Menu board renders cleanly at 1920x1080 and 3840x2160 resolutions with readable typography from 10 feet away.
• Menu updates in FloCafe POS reflect on the TV screen within 3 seconds.
• Video loop plays continuously without memory leaks, stutter, or blank screens between transitions.
• Turning off Wi-Fi on the TV player does not blank the screen; the cached menu continues displaying.