Admin & Team
Admin Menu Manager
Admin/owner menu management UI for restaurant apps. Manage dishes and combos in one internal screen with full CRUD, availability toggles, image upload with focal point selection, icon fallback support, and seed actions for quick setup. Intended for runtime admin/owner users, not basic end users.
Four working tabs, with the Combos tab optionally hidden by prop.
Uses requireAdmin (default true) for runtime gating; builder canvas still supports editing/placeholder state.
Available on all plans.
Four things worth knowing
Live + prefetched data loading
If _prefetchedMenuData exists, it hydrates instantly from BuilderDataContext. Otherwise data is fetched through useAdminMenu with runtime backend access.
Dish + combo operations
Supports dish CRUD for starter, main, dessert, plus combo CRUD (starter + main + dessert + optional drink) with active/inactive toggles.
Image + icon fallback priority
Dish visual priority is image first (imageUrl), then icon fallback (iconName or category default). Edit modal keeps the same fallback style for consistency.
Safe cache invalidation after edits
After successful create/update/delete, the component invalidates menuData so dependent menu widgets refresh and stay in sync.
Find it, drop it, publish
Where to find itAdd it to your admin screen
- Component picker → Admin & Team → Admin Menu Manager.
- Place it on an internal admin/owner screen.
- Use registry key
admin-menu-managerfor builder placement.
Before you publishFour things to check
- Keep the navigation flow admin-only as an extra access layer.
- Configure labels, feature toggles, and theme props in the property editor.
- Keep backend wiring available (
appId+secureApiCall) for live CRUD and image upload. - Publish so runtime gating and live menu data flow are active in AppPlayer.
Access, data, and safe editable fields
| Group | Prop | Default | What it controls |
|---|---|---|---|
| Access | requireAdmin, isAdminUser | true, runtime | Runtime admin gating and non-admin access denied state. |
| Data | appId, secureApiCall, _prefetchedMenuData | Runtime injected | Live backend CRUD and fast prefetched hydration. |
| Labels | headerTitle, addDishLabel, addComboLabel, emptyStateTitle, emptyStateSubtitle, seedMenuLabel | Component defaults | Editable UI copy for header, actions, and empty states. |
| Features | showCombosTab, showDishToggle, showDishDescription, showDishNutrition, showDishAllergens, showDishIngredients, showDishBadge, showDishImage, showDishOptions | Mostly true, options false | Toggles visible fields and controls in list cards and editors. |
| Runtime | isPreview, customWidth, customHeight | Runtime injected | Builder and AppPlayer display context values. |
Make it yours
All labels, feature visibility, and visual tokens below are safe to edit from Builder without changing core data flow.
| Prop | Default | What it controls |
|---|---|---|
showCombosTab | true | Shows or hides the Combos tab. |
showDishToggle, showDishDescription, showDishNutrition, showDishAllergens, showDishIngredients, showDishBadge, showDishImage | true | Dish field visibility in cards and modals. |
showDishOptions | false | Reserved future options editor toggle. |
primaryColor, secondaryColor, dangerColor, successColor | Brand defaults | Action and semantic state colors. |
backgroundColor, cardBackgroundColor, borderColor | Brand defaults | Surface and border styling. |
titleColor, subtitleColor, headerColor | Brand defaults | Text hierarchy styling. |
borderRadius, fontFamily | 14, Urbanist-SemiBold | Shape and typography. |
Common mistakes to avoid
Keep access admin-only at navigation level
Use protected navigation even when requireAdmin is enabled for clearer runtime separation.
Keep icon fallback aligned in the editor
When no dish image exists, use the same icon fallback logic in both list cards and edit modal preview (editorDishPreviewIcon + color fallback).
Invalidate menu data after mutations
After successful create/update/delete operations, keep builderData.invalidate(‘menuData’) so other menu widgets refresh correctly.
Bundle sync after runtime logic changes
If deployment uses bundled snapshots, run cd app and node collectSourceFiles.js to refresh bundled source files.