REACT ADMIN UI / DATA TO DAILY WORK
The UI around your data.
Manage the workspace in Tenant Panel. Configure application pages with tables, forms, charts and tabs, then render them through the React application runtime.
TENANT PANEL
ACTUAL UI / SAMPLE DATA
Actual Tenant Panel management dashboard with sample workspace and account data. This is the management application, separate from a configured end-user runtime.
ONE PLATFORM / DISTINCT RESPONSIBILITIES
Management, configuration, application.
The React management experience already exists. The same ecosystem also includes configurable interfaces for the people who use your project.
01 / TENANT PANEL
Manage the project.
Dashboards, project navigation, collections, permissions, dialogs and form controls support day-to-day configuration and administration.
02 / PAGE CONFIGURATION
Assemble the page.
In the Pages workspace, configure grid sections, component blocks, navigation, data bindings, forms, tables and actions. Save that configuration to the project.
03 / REACT RUNTIME
Use the application.
A separately deployed React application runtime reads the saved pages and renders the configured interface. Its behavior follows the project data, bindings and backend permissions.
CONFIGURE THE EXPERIENCE
Pages with a working save flow.
The Tenant Panel Pages workspace persists page sections, filters and navigation. Its component editor exposes settings such as General, Data source and Outputs.
Choose the components.
Compose tables, forms, tab panels, dashboard blocks, calendars and supported charts. Connect tables to schemas, saved pipelines or workflows. Charts use pipeline or workflow bindings.
Configure the details.
Set fields, columns, labels, filters, navigation and appropriate actions. Buttons and tabs are part of the real React interfaces shown here; internal UI primitives are not presented as a separately packaged customer UI kit.
TENANT PANEL
ACTUAL UI / SAMPLE DATA
Actual Tenant Panel component configuration, captured on a mobile viewport with sample workspace context. The screenshot shows the table editor; available settings depend on component type.
CONFIGURED RUNTIME / RECORD MANAGEMENT
Work with records, not just endpoints.
This local application example renders the actual React runtime. It includes project navigation, Records and New order tabs, search, sorting, pagination and configured record actions.
REACT APPLICATION RUNTIME
ACTUAL UI / SAMPLE DATA
Actual React application runtime, configured locally with sample API fixtures. Desktop shows the initial orders; mobile includes the sample record created during the form check. This is a local example, not a hosted customer deployment.
Configured schema tables support create, edit and delete actions, plus supported bulk operations. Availability depends on the binding, component settings, route access and record policies. Pipeline and workflow tables must use actions appropriate to their source.
FORM COMPONENTS / A COMPLETE USER ACTION
From a field to a saved record.
Configure text, number, select and other supported input types, required values and submission behavior. Forms support create, bulk-create or workflow submissions; record editing and deletion also live in table actions.
REACT APPLICATION RUNTIME
ACTUAL UI / SAMPLE DATA
Actual configured React form with sample order values. The local check switched tabs, submitted through the real API client to the fixture endpoint, and verified that the table refreshed. No production records were created.
AUTOTABLE DATA / REACT PRESENTATION
Keep the data connection explicit.
The page definition selects a component and its data source. The runtime makes tenant/project-scoped requests to AutoTable and renders the returned records or saved read model.
{
"type": "table",
"dataBinding": {
"kind": "schema",
"schemaName": "orders"
}
}Binding excerpt, not a complete page definition. A chart uses a supported chart type and a pipeline or workflow binding. The example chart is fed sample pipeline-shaped results.
REACT APPLICATION RUNTIME
ACTUAL UI / SAMPLE DATA
Actual React runtime bar chart and navigation with local sample order-status results. The sample API supplied those results; no production aggregation was run for this capture.
SETUP / REUSE / DELIVERY
Configure once. Reuse deliberately.
Reusable project templates are available through Tenant Panel project creation. They copy project configuration and optionally records, with explicit external-credential mappings where required.
A practical setup path
1. Create or choose the project and define the data schemas.
2. In Tenant Panel Pages, assemble sections and configure components, navigation, data bindings and actions.
3. Save the page configuration, then configure and deploy the separate React runtime against the intended API origin.
4. Set up application users, allowed origins, cookie behavior and backend permissions. Test each intended role and record operation.
What exists today
The management workspace, page configuration, project templates and React runtime components are implemented. The runtime captures on this page verify local rendering and sample-data interactions.
What delivery still requires
Page configuration is interpreted by the runtime; it is not an exported, generated React codebase. Runtime hosting is a separate step. A public hosted runtime demo and authenticated production rollout were not verified here; automatic hosting and a standalone admin generator are not claimed.
From a data model to a working product.
A connected foundation for the things you want to build.