Demo

Pages

Every screen uses the shared Page shell so navigation, titles, and mobile bottom nav stay consistent.

Page shell

Wrap screens with Page, PageTitle, and PageContent. Nest Dialogs and Sheets inside PageContent — never as siblings under Page.

TSXpage
1import { 2 Page, 3 PageContent, 4 PageNavTitle, 5 PageTitle, 6} from "@quan-erp/shared-ui"; 7import metadata from "../../module.metadata.json" with { type: "json" }; 8 9export default function ExamplePage() { 10 return ( 11 <Page 12 pluginName={metadata.name} 13 navMenu={{ menuTitle: <PageNavTitle>Title</PageNavTitle>, leadingBackButton: true }} 14 bottomNav={{ visible: true }} 15 > 16 <PageTitle>{/* title + actions */}</PageTitle> 17 <PageContent> 18 {/* tables, forms, Dialogs */} 19 </PageContent> 20 </Page> 21 ); 22}

Register routes

Prefix paths with /${metadata.name}. Use AppRegistry.route.add for standard layout pages and AppRegistry.rootRoute.add for blank/public layouts.

Shared UI

Prefer @quan-erp/shared-ui primitives (Button, Form, Input, EmptyState, LoadingState). Forms use react-hook-form + zod + FormField / FormMessage.