Admin & Team
Admin Service Manager
Admin/owner services management UI. Manage services, categories, booking timing, and provider assignment in one internal screen with full CRUD, prefetched data support, and preset loading. Intended for runtime admin/owner users, not basic end users.
Three working tabs for service catalog, organization, and appointment timing control.
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 prefetched props exist (_prefetchedServices, _prefetchedCategories, etc.), hydrates instantly from BuilderDataContext. Otherwise fetches through secureApiCall + appId.
Category-owned icon + image style
Service folders and cards inherit icon/color from their category. Category image empty state shows icon preview. Per-service icons are intentionally removed for consistency.
Timing controls, not schedule editor
Hours tab edits slotDurationMinutes and bufferMinutes only. Weekly schedule remains managed elsewhere and is preserved on save.
Duplicate-safe preset loading
Loads preset services by title+category deduplication. Refreshes UI to always reflect current backend data. Provider assignment supported.
Find it, drop it, publish
Where to find itAdd it to your admin screen
- Component picker → Admin & Team → Admin Service Manager.
- Place it on an internal admin/owner screen.
- Use registry key
admin-service-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 preset sync. - Publish so runtime gating and live service data flow are active in AppPlayer.
What you can configure
| Category | Prop | Type | Default | Description |
|---|---|---|---|---|
| Access | isAdminUser | boolean | injected | Runtime-injected flag. Admin/owner users only. Set via AppPlayer or builder data pipeline. |
| Data | appId | string | from builder | App identifier. Injected at runtime for backend API calls. |
| Data | secureApiCall | function | injected | Runtime-injected secure API caller for CRUD operations on services, categories, and availability. |
| Prefetch | _prefetchedServices | array | [] | Live service list. Pre-loaded for instant rendering. |
| Prefetch | _prefetchedCategories | array | [] | Live category list. Inherited icons/colors. Pre-loaded for editor dropdowns. |
| Labels | headerTitle | string | ”Manage Services” | Header title at top of component. |
| Labels | servicesTabLabel | string | ”Services” | Services tab label. |
| Labels | categoriesTabLabel | string | ”Categories” | Categories tab label. |
| Features | showCategoriesTab | boolean | true | Show/hide categories tab. Recommended true for complex menus. |
| Features | showServicePrice | boolean | true | Enable service price fields. |
| Features | showServiceDuration | boolean | true | Enable service duration fields (for booking integrations). |
| Runtime | _loadAllPresets | function | injected | Load preset service templates (e.g., salon types). Injected by admin sync backend. |
Feature flags and styling
| Control | Prop | Type | Default | Purpose |
|---|---|---|---|---|
| Tabs | showCategoriesTab | boolean | true | Show/hide the categories management tab. |
| Service fields | showServicePrice | boolean | true | Enable/disable service price editing. |
| Service fields | showServiceDuration | boolean | true | Enable/disable service duration for bookings. |
| Colors | backgroundColor | color | #FFFFFF | Background color for screens and cards. |
| Colors | primaryColor | color | #3B82F6 | Primary action and accent color. |
| Colors | secondaryColor | color | #8B5CF6 | Secondary accent color. |
| Colors | headerColor | color | #1A1A2E | Header/title text color. |
| Colors | dangerColor | color | #EF4444 | Delete/alert actions. |
| Colors | successColor | color | #22C55E | Success/saved states. |
| Styling | borderRadius | number | 14 | Card border radius (pixels). |
| Styling | fontFamily | string | Urbanist-SemiBold | Font family for text rendering. |
Common mistakes to avoid
Keep admin routes protected at navigation level
Use admin-only navigation even when isAdminUser gating is enabled for clearer runtime security separation.
Define categories before creating services
Services inherit category icons/colors. Set up categories with correct icons first for consistent visual branding across all service cards.
Preserve hours when saving services
Opening hours are app-global and saved via secureApiCall. Changes sync immediately across all frontend instances without manual triggers.
Rebuild and redeploy after preset updates
After adding/removing categories or services via presets, run npm run build and redeploy to ensure bundle contains latest service manifest.