feat(dashboard): Add dev mode ids to all pages

packages/dashboard/src/components/layout/app-layout.tsx

@@ -1,12 +1,15 @@
 import { AppSidebar } from '@/components/layout/app-sidebar.js';
 import { GeneratedBreadcrumbs } from '@/components/layout/generated-breadcrumbs.js';
+import { Badge } from '@/components/ui/badge.js';
 import { Separator } from '@/components/ui/separator.js';
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Trans } from '@lingui/react/macro';
 import { Outlet } from '@tanstack/react-router';
-import * as React from 'react';
 import { Alerts } from '../shared/alerts.js';
 
 export function AppLayout() {
+    const { settings } = useUserSettings();
     return (
         <SidebarProvider>
             <AppSidebar />
@@ -19,7 +22,10 @@ export function AppLayout() {
                                 <Separator orientation="vertical" className="mr-2 h-4" />
                                 <GeneratedBreadcrumbs />
                             </div>
-                            <Alerts />
+                            <div className="flex items-center justify-end gap-2">
+                                {settings.devMode && <Badge variant="destructive"><Trans>Dev Mode</Trans></Badge>}
+                                <Alerts />
+                            </div>
                         </div>
                     </header>
                     <Outlet />

packages/dashboard/src/components/layout/nav-user.tsx

@@ -143,25 +143,24 @@ export function NavUser() {
                                 </DropdownMenuSub>
                             </DropdownMenuGroup>
                             {isDevMode && (
-                                <DropdownMenuItem
-                                    onClick={e => {
-                                        e.preventDefault();
-                                        setDevMode(!settings.devMode);
-                                    }}
-                                >
-                                    <div className="flex items-center gap-2">
-                                        <Trans>Dev Mode</Trans>
-                                        {settings.devMode ? (
-                                            <Badge variant="success">
-                                                <Trans>enabled</Trans>
-                                            </Badge>
-                                        ) : (
-                                            <Badge variant="outline">
-                                                <Trans>disabled</Trans>
-                                            </Badge>
-                                        )}
-                                    </div>
-                                </DropdownMenuItem>
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>Dev Mode</DropdownMenuSubTrigger>
+                                    <DropdownMenuPortal>
+                                        <DropdownMenuSubContent>
+                                            <DropdownMenuRadioGroup
+                                                value={settings.devMode.toString()}
+                                                onValueChange={value => setDevMode(value === 'true')}
+                                            >
+                                                <DropdownMenuRadioItem value="true">
+                                                    <Trans>Enabled</Trans>
+                                                </DropdownMenuRadioItem>
+                                                <DropdownMenuRadioItem value="false">
+                                                    <Trans>Disabled</Trans>
+                                                </DropdownMenuRadioItem>
+                                            </DropdownMenuRadioGroup>
+                                        </DropdownMenuSubContent>
+                                    </DropdownMenuPortal>
+                                </DropdownMenuSub>
                             )}
                             <DropdownMenuSeparator />
                             <DropdownMenuItem onClick={handleLogout}>

packages/dashboard/src/framework/layout-engine/page-layout.tsx

@@ -48,19 +48,21 @@ export function PageLayout({ children, className }: PageLayoutProps) {
     const childArray: React.ReactElement<PageBlockProps>[] = [];
     const extensionBlocks = getDashboardPageBlocks(page.pageId ?? '');
     React.Children.forEach(children, child => {
-        let childBlock: React.ReactElement<PageBlockProps> | undefined;
         if (isPageBlock(child)) {
-            childBlock = child;
+            childArray.push(child);
         }
         // check for a React Fragment
         if (React.isValidElement(child) && child.type === React.Fragment) {
             React.Children.forEach((child as React.ReactElement<PageBlockProps>).props.children, child => {
                 if (isPageBlock(child)) {
-                    childBlock = child;
+                    childArray.push(child);
                 }
             });
         }
+    });
 
+    const finalChildArray: React.ReactElement<PageBlockProps>[] = [];
+    for (const childBlock of childArray) {
         if (childBlock) {
             const blockId =
                 childBlock.props.blockId ??
@@ -77,19 +79,20 @@ export function PageLayout({ children, className }: PageLayoutProps) {
                     </PageBlock>
                 );
                 if (extensionBlock.location.position.order === 'before') {
-                    childArray.push(ExtensionBlock, childBlock);
+                    finalChildArray.push(ExtensionBlock, childBlock);
                 } else if (extensionBlock.location.position.order === 'after') {
-                    childArray.push(childBlock, ExtensionBlock);
+                    finalChildArray.push(childBlock, ExtensionBlock);
                 } else if (extensionBlock.location.position.order === 'replace') {
-                    childArray.push(ExtensionBlock);
+                    finalChildArray.push(ExtensionBlock);
                 }
             } else {
-                childArray.push(childBlock);
+                finalChildArray.push(childBlock);
             }
         }
-    });
-    const mainBlocks = childArray.filter(child => isPageBlock(child) && child.props.column === 'main');
-    const sideBlocks = childArray.filter(child => isPageBlock(child) && child.props.column === 'side');
+    }
+
+    const mainBlocks = finalChildArray.filter(child => isPageBlock(child) && child.props.column === 'main');
+    const sideBlocks = finalChildArray.filter(child => isPageBlock(child) && child.props.column === 'side');
 
     return (
         <div className={cn('w-full space-y-4', className)}>

packages/dashboard/src/framework/page/list-page.tsx

@@ -31,6 +31,7 @@ export interface ListPageProps<
     V extends ListQueryOptionsShape,
     AC extends AdditionalColumns<T>,
 > extends PageProps {
+    pageId?: string;
     route: AnyRoute | (() => AnyRoute);
     title: string | React.ReactElement;
     listQuery: T;
@@ -53,6 +54,7 @@ export function ListPage<
     V extends ListQueryOptionsShape = ListQueryOptionsShape,
     AC extends AdditionalColumns<T> = AdditionalColumns<T>,
 >({
+    pageId,
     title,
     listQuery,
     deleteMutation,
@@ -114,7 +116,7 @@ export function ListPage<
     const listQueryWithCustomFields = addCustomFields(listQuery);
 
     return (
-        <Page>
+        <Page pageId={pageId}>
             <PageTitle>{title}</PageTitle>
             <PageActionBar>{children}</PageActionBar>
             <PaginatedListDataTable

packages/dashboard/src/routes/_authenticated/_administrators/administrators.tsx

@@ -17,6 +17,7 @@ export const Route = createFileRoute('/_authenticated/_administrators/administra
 function AdministratorListPage() {
     return (
         <ListPage
+            pageId="administrator-list"
             title="Administrators"
             listQuery={administratorListDocument}
             deleteMutation={deleteAdministratorDocument}

packages/dashboard/src/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -91,73 +91,67 @@ export function AdministratorDetailPage() {
     const roleIds = form.watch('roleIds');
 
     return (
-        <Page>
+        <Page pageId="administrator-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
                     <PageActionBarRight>
                         <PermissionGuard requires={['UpdateAdministrator']}>
-                                <Button
-                                    type="submit"
-                                    disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                                >
-                                    <Trans>Update</Trans>
-                                </Button>
-                            </PermissionGuard>
-                        </PageActionBarRight>
-                    </PageActionBar>
-                    <PageLayout>
-                        <PageBlock column="main">
-                            <div className="md:grid md:grid-cols-2 gap-4">
-                                <FormFieldWrapper
-                                    control={form.control}
-                                    name="firstName"
-                                    label={<Trans>First name</Trans>}
-                                    render={({ field }) => <Input placeholder="" {...field} />}
-                                />
-                                <FormFieldWrapper
-                                    control={form.control}
-                                    name="lastName"
-                                    label={<Trans>Last name</Trans>}
-                                    render={({ field }) => <Input placeholder="" {...field} />}
-                                />
-                                <FormFieldWrapper
-                                    control={form.control}
-                                    name="emailAddress"
-                                    label={<Trans>Email Address or identifier</Trans>}
-                                    render={({ field }) => <Input placeholder="" {...field} />}
-                                />
-                                <FormFieldWrapper
-                                    control={form.control}
-                                    name="password"
-                                    label={<Trans>Password</Trans>}
-                                    render={({ field }) => (
-                                        <Input placeholder="" type="password" {...field} />
-                                    )}
-                                />
-                            </div>
-                        </PageBlock>
-                        <CustomFieldsPageBlock
-                            column="main"
-                            entityType="Administrator"
-                            control={form.control}
-                        />
-                        <PageBlock column="main" title={<Trans>Roles</Trans>}>
+                            <Button
+                                type="submit"
+                                disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                            >
+                                <Trans>Update</Trans>
+                            </Button>
+                        </PermissionGuard>
+                    </PageActionBarRight>
+                </PageActionBar>
+                <PageLayout>
+                    <PageBlock column="main" blockId="main-form">
+                        <div className="md:grid md:grid-cols-2 gap-4">
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="firstName"
+                                label={<Trans>First name</Trans>}
+                                render={({ field }) => <Input placeholder="" {...field} />}
+                            />
                             <FormFieldWrapper
                                 control={form.control}
-                                name="roleIds"
-                                render={({ field }) => (
-                                    <RoleSelector
-                                        value={field.value ?? []}
-                                        onChange={field.onChange}
-                                        multiple={true}
-                                    />
-                                )}
+                                name="lastName"
+                                label={<Trans>Last name</Trans>}
+                                render={({ field }) => <Input placeholder="" {...field} />}
                             />
-                            <RolePermissionsDisplay value={roleIds ?? []} />
-                        </PageBlock>
-                    </PageLayout>
-                </PageDetailForm>
-            </Page>
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="emailAddress"
+                                label={<Trans>Email Address or identifier</Trans>}
+                                render={({ field }) => <Input placeholder="" {...field} />}
+                            />
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="password"
+                                label={<Trans>Password</Trans>}
+                                render={({ field }) => <Input placeholder="" type="password" {...field} />}
+                            />
+                        </div>
+                    </PageBlock>
+                    <CustomFieldsPageBlock column="main" entityType="Administrator" control={form.control} />
+                    <PageBlock column="main" blockId="roles" title={<Trans>Roles</Trans>}>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="roleIds"
+                            render={({ field }) => (
+                                <RoleSelector
+                                    value={field.value ?? []}
+                                    onChange={field.onChange}
+                                    multiple={true}
+                                />
+                            )}
+                        />
+                        <RolePermissionsDisplay value={roleIds ?? []} />
+                    </PageBlock>
+                </PageLayout>
+            </PageDetailForm>
+        </Page>
     );
 }

packages/dashboard/src/routes/_authenticated/_assets/assets.tsx

@@ -9,7 +9,7 @@ export const Route = createFileRoute('/_authenticated/_assets/assets')({
 
 function RouteComponent() {
     return (
-        <Page>
+        <Page pageId="asset-list">
             <PageTitle>
                 <Trans>Assets</Trans>
             </PageTitle>

packages/dashboard/src/routes/_authenticated/_channels/channels.tsx

@@ -17,6 +17,7 @@ export const Route = createFileRoute('/_authenticated/_channels/channels')({
 function ChannelListPage() {
     return (
         <ListPage
+            pageId="channel-list"
             title="Channels"
             listQuery={channelListQuery}
             deleteMutation={deleteChannelDocument}

packages/dashboard/src/routes/_authenticated/_channels/channels_.$id.tsx

@@ -105,7 +105,7 @@ export function ChannelDetailPage() {
     const codeIsDefault = entity?.code === DEFAULT_CHANNEL_CODE;
 
     return (
-        <Page>
+        <Page pageId="channel-detail">
             <PageTitle>
                 {creatingNewEntity ? (
                     <Trans>New channel</Trans>
@@ -127,7 +127,7 @@ export function ChannelDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}
@@ -183,7 +183,7 @@ export function ChannelDetailPage() {
                             />
                         </DetailFormGrid>
                     </PageBlock>
-                    <PageBlock column="main" title={<Trans>Channel defaults</Trans>}>
+                    <PageBlock column="main" blockId="channel-defaults" title={<Trans>Channel defaults</Trans>}>
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}

packages/dashboard/src/routes/_authenticated/_collections/collections.tsx

@@ -17,6 +17,7 @@ export const Route = createFileRoute('/_authenticated/_collections/collections')
 export function CollectionListPage() {
     return (
         <ListPage
+            pageId="collection-list"
             title="Collections"
             listQuery={collectionListDocument}
             deleteMutation={deleteCollectionDocument}

packages/dashboard/src/routes/_authenticated/_collections/collections_.$id.tsx

@@ -118,7 +118,7 @@ export function CollectionDetailPage() {
     const currentInheritFiltersValue = form.watch('inheritFilters');
 
     return (
-        <Page id="collection-detail">
+        <Page pageId="collection-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -134,7 +134,7 @@ export function CollectionDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="privacy">
                         <FormFieldWrapper
                             control={form.control}
                             name="isPrivate"
@@ -145,7 +145,7 @@ export function CollectionDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <TranslatableFormFieldWrapper
                                 control={form.control}
@@ -168,7 +168,7 @@ export function CollectionDetailPage() {
                         />
                     </PageBlock>
                     <CustomFieldsPageBlock column="main" entityType="Collection" control={form.control} />
-                    <PageBlock column="main" title={<Trans>Filters</Trans>}>
+                    <PageBlock column="main" blockId="filters" title={<Trans>Filters</Trans>}>
                         <FormFieldWrapper
                             control={form.control}
                             name="inheritFilters"
@@ -194,7 +194,7 @@ export function CollectionDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="assets">
                         <FormItem>
                             <FormLabel>
                                 <Trans>Assets</Trans>
@@ -206,11 +206,11 @@ export function CollectionDetailPage() {
                                     compact={true}
                                     value={form.getValues()}
                                     onChange={value => {
-                                        form.setValue('featuredAssetId', value.featuredAssetId, {
+                                        form.setValue('featuredAssetId', value.featuredAssetId ?? undefined, {
                                             shouldDirty: true,
                                             shouldValidate: true,
                                         });
-                                        form.setValue('assetIds', value.assetIds, {
+                                        form.setValue('assetIds', value.assetIds ?? [], {
                                             shouldDirty: true,
                                             shouldValidate: true,
                                         });
@@ -221,7 +221,7 @@ export function CollectionDetailPage() {
                             <FormMessage />
                         </FormItem>
                     </PageBlock>
-                    <PageBlock column="main" title={<Trans>Facet values</Trans>}>
+                    <PageBlock column="main" blockId="contents" title={<Trans>Facet values</Trans>}>
                         {shouldPreviewContents || creatingNewEntity ? (
                             <CollectionContentsPreviewTable
                                 parentId={entity?.parent?.id}

packages/dashboard/src/routes/_authenticated/_collections/components/collection-contents-table.tsx

@@ -26,7 +26,7 @@ export const collectionContentsDocument = graphql(`
 
 
 export interface CollectionContentsTableProps {
-    collectionId: string;
+    collectionId?: string;
 }
 
 export function CollectionContentsTable({ collectionId }: CollectionContentsTableProps) {

packages/dashboard/src/routes/_authenticated/_countries/countries.tsx

@@ -16,6 +16,7 @@ export const Route = createFileRoute('/_authenticated/_countries/countries')({
 function CountryListPage() {
     return (
         <ListPage
+            pageId="country-list"
             listQuery={countriesListQuery}
             deleteMutation={deleteCountryDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_countries/countries_.$id.tsx

@@ -75,7 +75,7 @@ export function CountryDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="country-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New country</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -91,7 +91,7 @@ export function CountryDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="enabled">
                         <FormFieldWrapper
                             control={form.control}
                             label={<Trans>Enabled</Trans>}
@@ -101,7 +101,7 @@ export function CountryDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <TranslatableFormFieldWrapper
                                 control={form.control}

packages/dashboard/src/routes/_authenticated/_customer-groups/customer-groups.tsx

@@ -19,6 +19,7 @@ export const Route = createFileRoute('/_authenticated/_customer-groups/customer-
 function CustomerGroupListPage() {
     return (
         <ListPage
+            pageId="customer-group-list"
             title="Customer Groups"
             listQuery={customerGroupListDocument}
             deleteMutation={deleteCustomerGroupDocument}

packages/dashboard/src/routes/_authenticated/_customer-groups/customer-groups_.$id.tsx

@@ -73,7 +73,7 @@ export function CustomerGroupDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="customer-group-detail">
             <PageTitle>
                 {creatingNewEntity ? <Trans>New customer group</Trans> : (entity?.name ?? '')}
             </PageTitle>
@@ -91,7 +91,7 @@ export function CustomerGroupDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}
@@ -103,7 +103,7 @@ export function CustomerGroupDetailPage() {
                     </PageBlock>
                     <CustomFieldsPageBlock column="main" entityType="CustomerGroup" control={form.control} />
                     {entity && (
-                        <PageBlock column="main" title={<Trans>Customers</Trans>}>
+                        <PageBlock column="main" blockId="customers" title={<Trans>Customers</Trans>}>
                             <CustomerGroupMembersTable customerGroupId={entity?.id} />
                         </PageBlock>
                     )}

packages/dashboard/src/routes/_authenticated/_customers/customers.tsx

@@ -18,6 +18,7 @@ export function CustomerListPage() {
     return (
         <ListPage
             title="Customers"
+            pageId="customer-list"
             listQuery={customerListDocument}
             deleteMutation={deleteCustomerDocument}
             onSearchTermChange={searchTerm => {

packages/dashboard/src/routes/_authenticated/_customers/customers_.$id.tsx

@@ -139,7 +139,7 @@ export function CustomerDetailPage() {
     console.log(entity);
 
     return (
-        <Page>
+        <Page pageId="customer-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New customer</Trans> : customerName}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -155,7 +155,7 @@ export function CustomerDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}
@@ -194,7 +194,7 @@ export function CustomerDetailPage() {
 
                     {entity && (
                         <>
-                            <PageBlock column="main" title={<Trans>Addresses</Trans>}>
+                            <PageBlock column="main" blockId="addresses" title={<Trans>Addresses</Trans>}>
                                 <DetailFormGrid>
                                     {entity?.addresses?.map(address => (
                                         <CustomerAddressCard
@@ -240,16 +240,16 @@ export function CustomerDetailPage() {
                                 </Dialog>
                             </PageBlock>
 
-                            <PageBlock column="main" title={<Trans>Orders</Trans>}>
+                            <PageBlock column="main" blockId="orders" title={<Trans>Orders</Trans>}>
                                 <CustomerOrderTable customerId={entity.id} />
                             </PageBlock>
-                            <PageBlock column="main" title={<Trans>Customer history</Trans>}>
+                            <PageBlock column="main" blockId="history" title={<Trans>Customer history</Trans>}>
                                 <CustomerHistoryContainer customerId={entity.id} />
                             </PageBlock>
-                            <PageBlock column="side" title={<Trans>Status</Trans>}>
+                            <PageBlock column="side" blockId="status" title={<Trans>Status</Trans>}>
                                 <CustomerStatusBadge user={entity.user} />
                             </PageBlock>
-                            <PageBlock column="side" title={<Trans>Customer groups</Trans>}>
+                            <PageBlock column="side" blockId="groups" title={<Trans>Customer groups</Trans>}>
                                 <div
                                     className={`flex flex-col gap-2 ${entity?.groups?.length > 0 ? 'mb-2' : ''}`}
                                 >

packages/dashboard/src/routes/_authenticated/_facets/facets.tsx

@@ -19,6 +19,7 @@ export const Route = createFileRoute('/_authenticated/_facets/facets')({
 export function FacetListPage() {
     return (
         <ListPage
+            pageId="facet-list"
             title="Facets"
             listQuery={facetListDocument}
             deleteMutation={deleteFacetDocument}

packages/dashboard/src/routes/_authenticated/_facets/facets_.$id.tsx

@@ -88,7 +88,7 @@ export function FacetDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="facet-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New facet</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -104,7 +104,7 @@ export function FacetDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="privacy">
                         <FormFieldWrapper
                             control={form.control}
                             name="isPrivate"
@@ -115,7 +115,7 @@ export function FacetDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <TranslatableFormFieldWrapper
                                 control={form.control}
@@ -132,8 +132,8 @@ export function FacetDetailPage() {
                         </DetailFormGrid>
                     </PageBlock>
                     <CustomFieldsPageBlock column="main" entityType="Facet" control={form.control} />
-                    {!creatingNewEntity && (
-                        <PageBlock column="main" title={<Trans>Facet values</Trans>}>
+                    {entity && (
+                        <PageBlock column="main" blockId="facet-values" title={<Trans>Facet values</Trans>}>
                             <FacetValuesTable facetId={entity?.id} />
                         </PageBlock>
                     )}

packages/dashboard/src/routes/_authenticated/_global-settings/global-settings.tsx

@@ -83,7 +83,7 @@ export function GlobalSettingsPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="global-settings">
             <PageTitle>
                 <Trans>Global settings</Trans>
             </PageTitle>
@@ -101,7 +101,7 @@ export function GlobalSettingsPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}

packages/dashboard/src/routes/_authenticated/_orders/orders.tsx

@@ -15,6 +15,7 @@ export const Route = createFileRoute('/_authenticated/_orders/orders')({
 export function OrderListPage() {
     return (
         <ListPage
+            pageId="order-list"
             title="Orders"
             onSearchTermChange={searchTerm => {
                 return {

packages/dashboard/src/routes/_authenticated/_orders/orders_.$id.tsx

@@ -65,7 +65,7 @@ export function FacetDetailPage() {
     }
 
     return (
-        <Page>
+        <Page pageId="order-detail">
             <PageTitle>{entity?.code ?? ''}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -81,20 +81,20 @@ export function FacetDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="order-table">
                         <OrderTable order={entity} />
                     </PageBlock>
-                    <PageBlock column="main" title={<Trans>Tax summary</Trans>}>
+                    <PageBlock column="main" blockId="tax-summary" title={<Trans>Tax summary</Trans>}>
                         <OrderTaxSummary order={entity} />
                     </PageBlock>
                     <CustomFieldsPageBlock column="main" entityType="Order" control={form.control} />
-                    <PageBlock column="main" title={<Trans>Order history</Trans>}>
+                    <PageBlock column="main" blockId="order-history" title={<Trans>Order history</Trans>}>
                         <OrderHistoryContainer orderId={entity.id} />
                     </PageBlock>
-                    <PageBlock column="side" title={<Trans>State</Trans>}>
+                    <PageBlock column="side" blockId="state" title={<Trans>State</Trans>}>
                         <Badge variant="outline">{entity?.state}</Badge>
                     </PageBlock>
-                    <PageBlock column="side" title={<Trans>Customer</Trans>}>
+                    <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
                         <Button variant="ghost" asChild>
                             <Link to={`/customers/${entity?.customer?.id}`}>
                                 <User className="w-4 h-4" />
@@ -120,7 +120,7 @@ export function FacetDetailPage() {
                             )}
                         </div>
                     </PageBlock>
-                    <PageBlock column="side" title={<Trans>Payment details</Trans>}>
+                    <PageBlock column="side" blockId="payment-details" title={<Trans>Payment details</Trans>}>
                         {entity?.payments?.map(payment => (
                             <PaymentDetails
                                 key={payment.id}

packages/dashboard/src/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -17,6 +17,7 @@ export const Route = createFileRoute('/_authenticated/_payment-methods/payment-m
 function PaymentMethodListPage() {
     return (
         <ListPage
+            pageId="payment-method-list"
             listQuery={paymentMethodListQuery}
             deleteMutation={deletePaymentMethodDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -99,7 +99,7 @@ export function PaymentMethodDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="payment-method-detail">
             <PageTitle>
                 {creatingNewEntity ? <Trans>New payment method</Trans> : (entity?.name ?? '')}
             </PageTitle>
@@ -117,7 +117,7 @@ export function PaymentMethodDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="enabled">
                         <FormFieldWrapper
                                 control={form.control}
                                 name="enabled"
@@ -125,7 +125,7 @@ export function PaymentMethodDetailPage() {
                                 render={({ field }) => <Switch checked={field.value ?? false} onCheckedChange={field.onChange} />}
                             />
                         </PageBlock>
-                        <PageBlock column="main">
+                        <PageBlock column="main" blockId="main-form">
                             <DetailFormGrid>
                                 <TranslatableFormFieldWrapper
                                     control={form.control}
@@ -148,7 +148,7 @@ export function PaymentMethodDetailPage() {
                             />
                         </PageBlock>
                         <CustomFieldsPageBlock column="main" entityType="PaymentMethod" control={form.control} />
-                        <PageBlock column="main" title={<Trans>Payment eligibility checker</Trans>}>
+                        <PageBlock column="main" blockId="payment-eligibility-checker" title={<Trans>Payment eligibility checker</Trans>}>
                             <FormFieldWrapper
                                 control={form.control}
                                 name="checker"
@@ -160,7 +160,7 @@ export function PaymentMethodDetailPage() {
                                 )}
                             />
                         </PageBlock>
-                        <PageBlock column="main" title={<Trans>Calculator</Trans>}>
+                        <PageBlock column="main" blockId="payment-handler" title={<Trans>Calculator</Trans>}>
                             <FormFieldWrapper
                                 control={form.control}
                                 name="handler"

packages/dashboard/src/routes/_authenticated/_product-variants/product-variants.tsx

@@ -16,6 +16,7 @@ export function ProductListPage() {
     const { formatCurrencyName } = useLocalFormat();
     return (
         <ListPage
+            pageId="product-variant-list"
             title={<Trans>Product Variants</Trans>}
             listQuery={productVariantListDocument}
             deleteMutation={deleteProductVariantDocument}

packages/dashboard/src/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -112,7 +112,7 @@ export function ProductVariantDetailPage() {
     const [price, taxCategoryId] = form.watch(['price', 'taxCategoryId']);
 
     return (
-        <Page>
+        <Page pageId="product-variant-detail">
             <PageTitle>
                 {creatingNewEntity ? <Trans>New product variant</Trans> : (entity?.name ?? '')}
             </PageTitle>
@@ -130,7 +130,7 @@ export function ProductVariantDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="enabled">
                         <FormFieldWrapper
                             control={form.control}
                             name="enabled"
@@ -141,7 +141,7 @@ export function ProductVariantDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <TranslatableFormFieldWrapper
                                 control={form.control}
@@ -160,7 +160,7 @@ export function ProductVariantDetailPage() {
                     </PageBlock>
                     <CustomFieldsPageBlock column="main" entityType="ProductVariant" control={form.control} />
 
-                    <PageBlock column="main" title={<Trans>Price and tax</Trans>}>
+                    <PageBlock column="main" blockId="price-and-tax" title={<Trans>Price and tax</Trans>}>
                         <div className="grid grid-cols-2 gap-4 items-start">
                             <FormFieldWrapper
                                 control={form.control}
@@ -189,7 +189,7 @@ export function ProductVariantDetailPage() {
                             </div>
                         </div>
                     </PageBlock>
-                    <PageBlock column="main" title={<Trans>Stock</Trans>}>
+                    <PageBlock column="main" blockId="stock" title={<Trans>Stock</Trans>}>
                         <DetailFormGrid>
                             {entity.stockLevels.map((stockLevel, index) => (
                                 <Fragment key={stockLevel.id}>
@@ -292,7 +292,7 @@ export function ProductVariantDetailPage() {
                         </DetailFormGrid>
                     </PageBlock>
 
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="facet-values">
                         <FormFieldWrapper
                             control={form.control}
                             name="facetValueIds"
@@ -302,7 +302,7 @@ export function ProductVariantDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="assets">
                         <FormItem>
                             <FormLabel>
                                 <Trans>Assets</Trans>

packages/dashboard/src/routes/_authenticated/_products/products.tsx

@@ -16,6 +16,7 @@ export const Route = createFileRoute('/_authenticated/_products/products')({
 export function ProductListPage() {
     return (
         <ListPage
+            pageId="product-list"
             listQuery={productListDocument}
             deleteMutation={deleteProductDocument}
             title="Products"

packages/dashboard/src/routes/_authenticated/_profile/profile.tsx

@@ -73,7 +73,7 @@ export function ProfilePage() {
     });
 
     return (
-        <Page>
+        <Page pageId="profile">
             <PageTitle>
                 <Trans>Profile</Trans>
             </PageTitle>
@@ -89,7 +89,7 @@ export function ProfilePage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}

packages/dashboard/src/routes/_authenticated/_promotions/promotions.tsx

@@ -17,6 +17,7 @@ export const Route = createFileRoute('/_authenticated/_promotions/promotions')({
 function PromotionListPage() {  
     return (
         <ListPage
+            pageId="promotion-list"
             listQuery={promotionListDocument}
             deleteMutation={deletePromotionDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -109,7 +109,7 @@ export function PromotionDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="promotion-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New promotion</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -125,7 +125,7 @@ export function PromotionDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="enabled">
                         <FormFieldWrapper
                             control={form.control}
                             name="enabled"
@@ -136,7 +136,7 @@ export function PromotionDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <TranslatableFormFieldWrapper
                                 control={form.control}
@@ -210,7 +210,7 @@ export function PromotionDetailPage() {
                         </DetailFormGrid>
                     </PageBlock>
                     <CustomFieldsPageBlock column="main" entityType="Promotion" control={form.control} />
-                    <PageBlock column="main" title={<Trans>Conditions</Trans>}>
+                    <PageBlock column="main" blockId="conditions" title={<Trans>Conditions</Trans>}>
                         <FormFieldWrapper
                             control={form.control}
                             name="conditions"
@@ -222,7 +222,7 @@ export function PromotionDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="main" title={<Trans>Actions</Trans>}>
+                    <PageBlock column="main" blockId="actions" title={<Trans>Actions</Trans>}>
                         <FormFieldWrapper
                             control={form.control}
                             name="actions"

packages/dashboard/src/routes/_authenticated/_roles/roles.tsx

@@ -22,6 +22,7 @@ const SYSTEM_ROLES = [SUPER_ADMIN_ROLE_CODE, CUSTOMER_ROLE_CODE];
 function RoleListPage() {
     return (
         <ListPage
+            pageId="role-list"
             title="Roles"
             listQuery={roleListQuery}
             deleteMutation={deleteRoleDocument}

packages/dashboard/src/routes/_authenticated/_roles/roles_.$id.tsx

@@ -72,7 +72,7 @@ export function RoleDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="role-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New role</Trans> : (entity?.description ?? '')}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -88,7 +88,7 @@ export function RoleDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}
@@ -104,7 +104,7 @@ export function RoleDetailPage() {
                             />
                         </DetailFormGrid>
                     </PageBlock>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="channels">
                         <div className="space-y-8">
                             <div className="md:grid md:grid-cols-2 gap-4">
                                 <FormFieldWrapper

packages/dashboard/src/routes/_authenticated/_sellers/sellers.tsx

@@ -16,6 +16,7 @@ export const Route = createFileRoute('/_authenticated/_sellers/sellers')({
 function SellerListPage() {
     return (
         <ListPage
+            pageId="seller-list"
             listQuery={sellerListQuery}
             deleteMutation={deleteSellerDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_sellers/sellers_.$id.tsx

@@ -77,7 +77,7 @@ export function SellerDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="seller-detail">
             <PageTitle>
                 {creatingNewEntity ? <Trans>New seller</Trans> : (entity?.name ?? '')}
             </PageTitle>
@@ -95,7 +95,7 @@ export function SellerDetailPage() {
                         </PermissionGuard>
                     </PageActionBar>
                     <PageLayout>
-                        <PageBlock column="main">
+                        <PageBlock column="main" blockId="main-form">
                             <div className="md:flex w-full gap-4">
                                 <div className="w-1/2">
                                     <FormField

packages/dashboard/src/routes/_authenticated/_shipping-methods/shipping-methods.tsx

@@ -17,6 +17,7 @@ export const Route = createFileRoute('/_authenticated/_shipping-methods/shipping
 function ShippingMethodListPage() {
     return (
         <ListPage
+            pageId="shipping-method-list"
             listQuery={shippingMethodListQuery}
             deleteMutation={deleteShippingMethodDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -97,7 +97,7 @@ export function ShippingMethodDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="shipping-method-detail">
             <PageTitle>
                 {creatingNewEntity ? <Trans>New shipping method</Trans> : (entity?.name ?? '')}
             </PageTitle>
@@ -115,7 +115,7 @@ export function ShippingMethodDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <TranslatableFormFieldWrapper
                                 control={form.control}
@@ -151,7 +151,7 @@ export function ShippingMethodDetailPage() {
                         </DetailFormGrid>
                     </PageBlock>
                     <CustomFieldsPageBlock column="main" entityType="Promotion" control={form.control} />
-                    <PageBlock column="main" title={<Trans>Conditions</Trans>}>
+                    <PageBlock column="main" blockId="conditions" title={<Trans>Conditions</Trans>}>
                         <FormFieldWrapper
                             control={form.control}
                             name="checker"
@@ -163,7 +163,7 @@ export function ShippingMethodDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="main" title={<Trans>Calculator</Trans>}>
+                    <PageBlock column="main" blockId="calculator" title={<Trans>Calculator</Trans>}>
                         <FormFieldWrapper
                             control={form.control}
                             name="calculator"

packages/dashboard/src/routes/_authenticated/_stock-locations/stock-locations.tsx

@@ -15,6 +15,7 @@ export const Route = createFileRoute('/_authenticated/_stock-locations/stock-loc
 function StockLocationListPage() {
     return (
         <ListPage
+            pageId="stock-location-list"
             title="Stock Locations"
             listQuery={stockLocationListQuery}
             deleteMutation={deleteStockLocationDocument}

packages/dashboard/src/routes/_authenticated/_stock-locations/stock-locations_.$id.tsx

@@ -75,7 +75,7 @@ export function StockLocationDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="stock-location-detail">
             <PageTitle>
                 {creatingNewEntity ? <Trans>New stock location</Trans> : (entity?.name ?? '')}
             </PageTitle>
@@ -93,7 +93,7 @@ export function StockLocationDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}

packages/dashboard/src/routes/_authenticated/_system/job-queue.tsx

@@ -51,6 +51,7 @@ const STATES = [
 export function JobQueuePage() {
     return (
         <ListPage
+            pageId="job-queue-list"
             title="Job Queue"
             listQuery={jobListDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_tax-categories/tax-categories.tsx

@@ -17,6 +17,7 @@ export const Route = createFileRoute('/_authenticated/_tax-categories/tax-catego
 function TaxCategoryListPage() {
     return (
         <ListPage
+            pageId="tax-category-list"
             listQuery={taxCategoryListQuery}
             deleteMutation={deleteTaxCategoryDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_tax-categories/tax-categories_.$id.tsx

@@ -73,7 +73,7 @@ export function TaxCategoryDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="tax-category-detail">
             <PageTitle>
                 {creatingNewEntity ? <Trans>New tax category</Trans> : (entity?.name ?? '')}
             </PageTitle>
@@ -91,7 +91,7 @@ export function TaxCategoryDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}

packages/dashboard/src/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -18,6 +18,7 @@ export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
 function TaxRateListPage() {
     return (
         <ListPage
+            pageId="tax-rate-list"
             listQuery={taxRateListQuery}
             deleteMutation={deleteTaxRateDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -79,7 +79,7 @@ export function TaxRateDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="tax-rate-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New tax rate</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -95,7 +95,7 @@ export function TaxRateDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="side">
+                    <PageBlock column="side" blockId="enabled">
                         <FormFieldWrapper
                             control={form.control}
                             name="enabled"
@@ -105,7 +105,7 @@ export function TaxRateDetailPage() {
                             )}
                         />
                     </PageBlock>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}

packages/dashboard/src/routes/_authenticated/_zones/zones.tsx

@@ -17,6 +17,7 @@ export const Route = createFileRoute('/_authenticated/_zones/zones')({
 function ZoneListPage() {
     return (
         <ListPage
+            pageId="zone-list"
             listQuery={zoneListQuery}
             deleteMutation={deleteZoneDocument}
             route={Route}

packages/dashboard/src/routes/_authenticated/_zones/zones_.$id.tsx

@@ -70,7 +70,7 @@ export function ZoneDetailPage() {
     });
 
     return (
-        <Page>
+        <Page pageId="zone-detail">
             <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageDetailForm form={form} submitHandler={submitHandler}>
                 <PageActionBar>
@@ -86,7 +86,7 @@ export function ZoneDetailPage() {
                     </PageActionBarRight>
                 </PageActionBar>
                 <PageLayout>
-                    <PageBlock column="main">
+                    <PageBlock column="main" blockId="main-form">
                         <DetailFormGrid>
                             <FormFieldWrapper
                                 control={form.control}
@@ -97,9 +97,9 @@ export function ZoneDetailPage() {
                         </DetailFormGrid>
                     </PageBlock>
                     <CustomFieldsPageBlock column="main" entityType="Zone" control={form.control} />
-                    {!creatingNewEntity && (
-                        <PageBlock column="main" title={<Trans>Countries</Trans>}>
-                            <ZoneCountriesTable zoneId={entity?.id} canAddCountries={true} />
+                    {entity && (
+                        <PageBlock column="main" blockId="countries" title={<Trans>Countries</Trans>}>
+                            <ZoneCountriesTable zoneId={entity.id} canAddCountries={true} />
                         </PageBlock>
                     )}
                 </PageLayout>