Menu Board

The Menu Board is a drag-and-drop dashboard designer that lets you create custom layouts for TV menus, customer-facing displays, management reporting dashboards, and operational screens. It uses a flexible grid system powered by Angular Gridster2, where widgets are added, sized, and positioned visually.

Admin Mode vs User Mode

The Menu Board operates in two modes:

Mode	Description	Grid Interaction
Admin (Designer)	Full edit mode for admins and managers. Access to the widget palette, drag-and-drop, resize, delete, and configure widgets.	Widgets can be dragged, resized, swapped, and deleted. Right-click menu shows Settings and Delete.
User (Locked)	View-only mode for end users, customer displays, and TV screens. No editing is possible.	Grid is locked — no dragging, resizing, or editing. Widgets render as configured.

Locked mode is activated via the URL parameter locked=true:

http://yoursite.com/menu-board;id=1;locked=true

Accessing the Menu Board

Navigate to /menu-board in your browser. The main shell provides:

• Toolbar — Logo, Home, Menu toggle, Theme toggle, API status indicator, and the Dashboard Switcher
• Side Panel — Widget palette (in admin mode) and Designer tools
• Main Canvas — The gridster layout where widgets are placed and arranged

Dashboard Types

When creating a dashboard, you assign it a type that determines its purpose and the widgets available:

Type	Use Case
Menu	TV menus, customer-facing product displays, category browses
Report	Management dashboards with sales data, charts, and analytics
Seating/Table Layout	Restaurant table maps and floor plan displays
Order	Live order feeds, order totals, and order tracking displays

Dashboard Switcher

The toolbar displays toggle buttons for each saved dashboard. Click a dashboard name to switch the active layout. The current dashboard is highlighted in the toggle group.

Key Concepts

• A Dashboard is a named, saved layout with its own grid dimensions, background, and widget collection.
• A Widget (or card) is a single component placed on the grid. Each widget has a type (chart, menu, report, image, YouTube, etc.), configuration, and design properties.
• The Grid is the canvas where widgets live. Grid columns, rows, and pixel dimensions are configured per-dashboard to match the target screen (e.g., a TV at 1920x1080 or a tablet at 800x600).

Quick Start

1. Navigate to /menu-board
2. Click Add Dashboard in the side panel to create a new layout
3. Configure name, type, dimensions, and background
4. Open the widget palette and drag widgets onto the grid
5. Click a widget and use Settings to configure it
6. Click Save Required when changes are pending
7. Test the dashboard in locked mode by appending ;locked=true to the URL

For more on creating and arranging dashboards, see Designing Dashboards. For widget configuration options, see Widgets.