refactor(dashboard): Update detail pages to allow query extension

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

@@ -26,9 +26,12 @@ import {
 } from './administrators.graphql.js';
 import { RolePermissionsDisplay } from './components/role-permissions-display.js';
 
+const pageId = 'administrator-detail';
+
 export const Route = createFileRoute('/_authenticated/_administrators/administrators_/$id')({
     component: AdministratorDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: administratorDetailDocument,
         breadcrumb: (isNew, entity) => {
             const name = `${entity?.firstName} ${entity?.lastName}`;
@@ -48,6 +51,7 @@ function AdministratorDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: administratorDetailDocument,
         createDocument: createAdministratorDocument,
         updateDocument: updateAdministratorDocument,
@@ -87,7 +91,7 @@ function AdministratorDetailPage() {
     const roleIds = form.watch('roleIds');
 
     return (
-        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
 
             <PageActionBar>

packages/dashboard/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -25,9 +25,13 @@ import { FocusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
+
+const pageId = 'asset-detail';
+
 export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
     component: AssetDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: assetDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -49,7 +53,8 @@ function AssetDetailPage() {
     const [height, setHeight] = useState(0);
     const [focalPoint, setFocalPoint] = useState<Point | undefined>(undefined);
     const [settingFocalPoint, setSettingFocalPoint] = useState(false);
-    const { form, submitHandler, entity, isPending } = useDetailPage({
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: assetDetailDocument,
         updateDocument: assetUpdateDocument,
         setValuesForUpdate: entity => {
@@ -86,7 +91,7 @@ function AssetDetailPage() {
         return null;
     }
     return (
-        <Page pageId="asset-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Edit asset</Trans>
             </PageTitle>

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

@@ -27,9 +27,12 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { channelDetailDocument, createChannelDocument, updateChannelDocument } from './channels.graphql.js';
 
+const pageId = 'channel-detail';
+
 export const Route = createFileRoute('/_authenticated/_channels/channels_/$id')({
     component: ChannelDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: channelDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -48,6 +51,7 @@ function ChannelDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: channelDetailDocument,
         createDocument: createChannelDocument,
         updateDocument: updateChannelDocument,
@@ -100,7 +104,7 @@ function ChannelDetailPage() {
     const codeIsDefault = entity?.code === DEFAULT_CHANNEL_CODE;
 
     return (
-        <Page pageId="channel-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? (
                     <Trans>New channel</Trans>

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

@@ -33,9 +33,12 @@ import { CollectionContentsPreviewTable } from './components/collection-contents
 import { CollectionContentsTable } from './components/collection-contents-table.js';
 import { CollectionFiltersSelector } from './components/collection-filters-selector.js';
 
+const pageId = 'collection-detail';
+
 export const Route = createFileRoute('/_authenticated/_collections/collections_/$id')({
     component: CollectionDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: collectionDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/collections', label: 'Collections' },
@@ -52,6 +55,7 @@ function CollectionDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: collectionDetailDocument,
         createDocument: createCollectionDocument,
         transformCreateInput: values => {
@@ -105,7 +109,7 @@ function CollectionDetailPage() {
     const currentInheritFiltersValue = form.watch('inheritFilters');
 
     return (
-        <Page pageId="collection-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_countries/countries.graphql.ts

@@ -24,7 +24,7 @@ export const countriesListQuery = graphql(
     [countryItemFragment],
 );
 
-export const countryDetailQuery = graphql(`
+export const countryDetailDocument = graphql(`
     query CountryDetail($id: ID!) {
         country(id: $id) {
             id

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

@@ -21,12 +21,15 @@ import { useDetailPage } from '@/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
-import { countryDetailQuery, createCountryDocument, updateCountryDocument } from './countries.graphql.js';
+import { countryDetailDocument, createCountryDocument, updateCountryDocument } from './countries.graphql.js';
+
+const pageId = 'country-detail';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries_/$id')({
     component: CountryDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: countryDetailQuery,
+        pageId,
+        queryDocument: countryDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/countries', label: 'Countries' },
             isNew ? <Trans>New country</Trans> : entity?.name,
@@ -41,8 +44,9 @@ function CountryDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
-        queryDocument: countryDetailQuery,
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: countryDetailDocument,
         createDocument: createCountryDocument,
         updateDocument: updateCountryDocument,
         setValuesForUpdate: entity => {
@@ -71,7 +75,7 @@ function CountryDetailPage() {
     });
 
     return (
-        <Page pageId="country-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New country</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_customer-groups/customer-groups.graphql.ts

@@ -33,7 +33,7 @@ export const removeCustomersFromGroupDocument = graphql(`
     }
 `);
 
-export const customerGroupDocument = graphql(`
+export const customerGroupDetailDocument = graphql(`
     query CustomerGroup($id: ID!) {
         customerGroup(id: $id) {
             id

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

@@ -4,7 +4,6 @@ import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { Button } from '@/components/ui/button.js';
 import { Input } from '@/components/ui/input.js';
 import { NEW_ENTITY_PATH } from '@/constants.js';
-import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -23,14 +22,17 @@ import { toast } from 'sonner';
 import { CustomerGroupMembersTable } from './components/customer-group-members-table.js';
 import {
     createCustomerGroupDocument,
-    customerGroupDocument,
+    customerGroupDetailDocument,
     updateCustomerGroupDocument,
 } from './customer-groups.graphql.js';
 
+const pageId = 'customer-group-detail';
+
 export const Route = createFileRoute('/_authenticated/_customer-groups/customer-groups_/$id')({
     component: CustomerGroupDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: customerGroupDocument,
+        pageId,
+        queryDocument: customerGroupDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/customer-groups', label: 'Customer groups' },
             isNew ? <Trans>New customer group</Trans> : entity?.name,
@@ -46,7 +48,8 @@ function CustomerGroupDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        queryDocument: addCustomFields(customerGroupDocument),
+        pageId,
+        queryDocument: customerGroupDetailDocument,
         createDocument: createCustomerGroupDocument,
         updateDocument: updateCustomerGroupDocument,
         setValuesForUpdate: entity => {
@@ -72,7 +75,7 @@ function CustomerGroupDetailPage() {
     });
 
     return (
-        <Page pageId="customer-group-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New customer group</Trans> : (entity?.name ?? '')}
             </PageTitle>

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

@@ -47,9 +47,12 @@ import {
     updateCustomerDocument,
 } from './customers.graphql.js';
 
+const pageId = 'customer-detail';
+
 export const Route = createFileRoute('/_authenticated/_customers/customers_/$id')({
     component: CustomerDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: customerDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/customers', label: 'Customers' },
@@ -67,6 +70,7 @@ function CustomerDetailPage() {
     const [newAddressOpen, setNewAddressOpen] = useState(false);
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
+        pageId,
         queryDocument: customerDetailDocument,
         createDocument: createCustomerDocument,
         updateDocument: updateCustomerDocument,
@@ -137,7 +141,7 @@ function CustomerDetailPage() {
     const customerName = entity ? `${entity.firstName} ${entity.lastName}` : '';
 
     return (
-        <Page pageId="customer-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New customer</Trans> : customerName}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -24,9 +24,12 @@ import { toast } from 'sonner';
 import { FacetValuesTable } from './components/facet-values-table.js';
 import { createFacetDocument, facetDetailDocument, updateFacetDocument } from './facets.graphql.js';
 
+const pageId = 'facet-detail';
+
 export const Route = createFileRoute('/_authenticated/_facets/facets_/$id')({
     component: FacetDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: facetDetailDocument,
         breadcrumb(isNew, entity) {
             return [{ path: '/facets', label: 'Facets' }, isNew ? <Trans>New facet</Trans> : entity?.name];
@@ -42,6 +45,7 @@ function FacetDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: facetDetailDocument,
         createDocument: createFacetDocument,
         updateDocument: updateFacetDocument,
@@ -82,7 +86,7 @@ function FacetDetailPage() {
     });
 
     return (
-        <Page pageId="facet-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New facet</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -25,6 +25,8 @@ import { OrderTaxSummary } from './components/order-tax-summary.js';
 import { PaymentDetails } from './components/payment-details.js';
 import { orderDetailDocument } from './orders.graphql.js';
 
+const pageId = 'order-detail';
+
 export const Route = createFileRoute('/_authenticated/_orders/orders_/$id')({
     component: OrderDetailPage,
     loader: async ({ context, params }) => {
@@ -58,7 +60,8 @@ function OrderDetailPage() {
     const params = Route.useParams();
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: orderDetailDocument,
         setValuesForUpdate: entity => {
             return {
@@ -83,7 +86,7 @@ function OrderDetailPage() {
     }
 
     return (
-        <Page pageId="order-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{entity?.code ?? ''}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -30,9 +30,12 @@ import {
     updatePaymentMethodDocument,
 } from './payment-methods.graphql.js';
 
+const pageId = 'payment-method-detail';
+
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods_/$id')({
     component: PaymentMethodDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: paymentMethodDetailDocument,
         breadcrumb(_isNew, entity) {
             return [{ path: '/payment-methods', label: 'Payment methods' }, entity?.name];
@@ -48,6 +51,7 @@ function PaymentMethodDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: paymentMethodDetailDocument,
         createDocument: createPaymentMethodDocument,
         updateDocument: updatePaymentMethodDocument,
@@ -102,7 +106,7 @@ function PaymentMethodDetailPage() {
     });
 
     return (
-        <Page pageId="payment-method-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New payment method</Trans> : (entity?.name ?? '')}
             </PageTitle>

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

@@ -36,9 +36,12 @@ import {
     updateProductVariantDocument,
 } from './product-variants.graphql.js';
 
+const pageId = 'product-variant-detail';
+
 export const Route = createFileRoute('/_authenticated/_product-variants/product-variants_/$id')({
     component: ProductVariantDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: productVariantDetailDocument,
         breadcrumb(_isNew, entity, location) {
             if ((location.search as any).from === 'product') {
@@ -62,6 +65,7 @@ function ProductVariantDetailPage() {
     const { activeChannel } = useChannel();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: productVariantDetailDocument,
         createDocument: createProductVariantDocument,
         updateDocument: updateProductVariantDocument,
@@ -109,7 +113,7 @@ function ProductVariantDetailPage() {
     const [price, taxCategoryId] = form.watch(['price', 'taxCategoryId']);
 
     return (
-        <Page pageId="product-variant-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New product variant</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -31,9 +31,12 @@ import { CreateProductVariantsDialog } from './components/create-product-variant
 import { ProductVariantsTable } from './components/product-variants-table.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
 
+const pageId = 'product-detail';
+
 export const Route = createFileRoute('/_authenticated/_products/products_/$id')({
     component: ProductDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: productDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -53,6 +56,7 @@ function ProductDetailPage() {
     const refreshRef = useRef<() => void>(() => {});
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
+        pageId,
         entityName: 'Product',
         queryDocument: productDetailDocument,
         createDocument: createProductDocument,
@@ -91,7 +95,7 @@ function ProductDetailPage() {
     });
 
     return (
-        <Page pageId="product-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New product</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -31,9 +31,12 @@ import {
     updatePromotionDocument,
 } from './promotions.graphql.js';
 
+const pageId = 'promotion-detail';
+
 export const Route = createFileRoute('/_authenticated/_promotions/promotions_/$id')({
     component: PromotionDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: promotionDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -52,6 +55,7 @@ function PromotionDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: promotionDetailDocument,
         createDocument: createPromotionDocument,
         transformCreateInput: values => {
@@ -114,7 +118,7 @@ function PromotionDetailPage() {
     });
 
     return (
-        <Page pageId="promotion-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New promotion</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -22,9 +22,12 @@ import { toast } from 'sonner';
 import { PermissionsGrid } from './components/permissions-grid.js';
 import { createRoleDocument, roleDetailDocument, updateRoleDocument } from './roles.graphql.js';
 
+const pageId = 'role-detail';
+
 export const Route = createFileRoute('/_authenticated/_roles/roles_/$id')({
     component: RoleDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: roleDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -43,6 +46,7 @@ function RoleDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: roleDetailDocument,
         createDocument: createRoleDocument,
         updateDocument: updateRoleDocument,
@@ -71,7 +75,7 @@ function RoleDetailPage() {
     });
 
     return (
-        <Page pageId="role-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New role</Trans> : (entity?.description ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -20,9 +20,12 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { createSellerDocument, sellerDetailDocument, updateSellerDocument } from './sellers.graphql.js';
 
+const pageId = 'seller-detail';
+
 export const Route = createFileRoute('/_authenticated/_sellers/sellers_/$id')({
     component: SellerDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: sellerDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/sellers', label: 'Sellers' },
@@ -38,7 +41,8 @@ function SellerDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: sellerDetailDocument,
         createDocument: createSellerDocument,
         updateDocument: updateSellerDocument,
@@ -65,7 +69,7 @@ function SellerDetailPage() {
     });
 
     return (
-        <Page pageId="seller-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New seller</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -30,9 +30,12 @@ import {
     updateShippingMethodDocument,
 } from './shipping-methods.graphql.js';
 
+const pageId = 'shipping-method-detail';
+
 export const Route = createFileRoute('/_authenticated/_shipping-methods/shipping-methods_/$id')({
     component: ShippingMethodDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: shippingMethodDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -51,6 +54,7 @@ function ShippingMethodDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: shippingMethodDetailDocument,
         createDocument: createShippingMethodDocument,
         updateDocument: updateShippingMethodDocument,
@@ -94,7 +98,7 @@ function ShippingMethodDetailPage() {
     });
 
     return (
-        <Page pageId="shipping-method-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New shipping method</Trans> : (entity?.name ?? '')}
             </PageTitle>

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

@@ -26,9 +26,12 @@ import {
     updateStockLocationDocument,
 } from './stock-locations.graphql.js';
 
+const pageId = 'stock-location-detail';
+
 export const Route = createFileRoute('/_authenticated/_stock-locations/stock-locations_/$id')({
     component: StockLocationDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: stockLocationDetailQuery,
         breadcrumb(isNew, entity) {
             return [
@@ -47,6 +50,7 @@ function StockLocationDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: stockLocationDetailQuery,
         createDocument: createStockLocationDocument,
         updateDocument: updateStockLocationDocument,
@@ -74,7 +78,7 @@ function StockLocationDetailPage() {
     });
 
     return (
-        <Page pageId="stock-location-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New stock location</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_tax-categories/tax-categories.graphql.ts

@@ -24,7 +24,7 @@ export const taxCategoryListQuery = graphql(
     [taxCategoryItemFragment],
 );
 
-export const taxCategoryDetailQuery = graphql(`
+export const taxCategoryDetailDocument = graphql(`
     query TaxCategoryDetail($id: ID!) {
         taxCategory(id: $id) {
             id

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

@@ -22,14 +22,17 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {
     createTaxCategoryDocument,
-    taxCategoryDetailQuery,
+    taxCategoryDetailDocument,
     updateTaxCategoryDocument,
 } from './tax-categories.graphql.js';
 
+const pageId = 'tax-category-detail';
+
 export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories_/$id')({
     component: TaxCategoryDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: taxCategoryDetailQuery,
+        pageId,
+        queryDocument: taxCategoryDetailDocument,
         breadcrumb(isNew, entity) {
             return [
                 { path: '/tax-categories', label: 'Tax categories' },
@@ -46,8 +49,9 @@ function TaxCategoryDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
-        queryDocument: taxCategoryDetailQuery,
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: taxCategoryDetailDocument,
         createDocument: createTaxCategoryDocument,
         updateDocument: updateTaxCategoryDocument,
         setValuesForUpdate: entity => {
@@ -73,7 +77,7 @@ function TaxCategoryDetailPage() {
     });
 
     return (
-        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New tax category</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_tax-rates/tax-rates.graphql.ts

@@ -37,7 +37,7 @@ export const taxRateListQuery = graphql(
     [taxRateItemFragment],
 );
 
-export const taxRateDetailQuery = graphql(
+export const taxRateDetailDocument = graphql(
     `
         query TaxRateDetail($id: ID!) {
             taxRate(id: $id) {

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

@@ -23,12 +23,15 @@ import { useDetailPage } from '@/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
-import { createTaxRateDocument, taxRateDetailQuery, updateTaxRateDocument } from './tax-rates.graphql.js';
+import { createTaxRateDocument, taxRateDetailDocument, updateTaxRateDocument } from './tax-rates.graphql.js';
+
+const pageId = 'tax-rate-detail';
 
 export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates_/$id')({
     component: TaxRateDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: taxRateDetailQuery,
+        pageId,
+        queryDocument: taxRateDetailDocument,
         breadcrumb(isNew, entity) {
             return [
                 { path: '/tax-rates', label: 'Tax rates' },
@@ -46,7 +49,8 @@ function TaxRateDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        queryDocument: taxRateDetailQuery,
+        pageId,
+        queryDocument: taxRateDetailDocument,
         createDocument: createTaxRateDocument,
         updateDocument: updateTaxRateDocument,
         setValuesForUpdate: entity => {
@@ -77,7 +81,7 @@ function TaxRateDetailPage() {
     });
 
     return (
-        <Page pageId="tax-rate-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New tax rate</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_zones/zones.graphql.ts

@@ -42,7 +42,7 @@ export const zoneMembersQuery = graphql(`
     }
 `);
 
-export const zoneDetailQuery = graphql(
+export const zoneDetailDocument = graphql(
     `
         query ZoneDetail($id: ID!) {
             zone(id: $id) {

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

@@ -20,12 +20,15 @@ import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { ZoneCountriesTable } from './components/zone-countries-table.js';
-import { createZoneDocument, updateZoneDocument, zoneDetailQuery } from './zones.graphql.js';
+import { createZoneDocument, updateZoneDocument, zoneDetailDocument } from './zones.graphql.js';
+
+const pageId = 'zone-detail';
 
 export const Route = createFileRoute('/_authenticated/_zones/zones_/$id')({
     component: ZoneDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: zoneDetailQuery,
+        pageId,
+        queryDocument: zoneDetailDocument,
         breadcrumb(isNew, entity) {
             return [{ path: '/zones', label: 'Zones' }, isNew ? <Trans>New zone</Trans> : entity?.name];
         },
@@ -40,7 +43,8 @@ function ZoneDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        queryDocument: zoneDetailQuery,
+        pageId,
+        queryDocument: zoneDetailDocument,
         createDocument: createZoneDocument,
         updateDocument: updateZoneDocument,
         setValuesForUpdate: entity => {
@@ -66,7 +70,7 @@ function ZoneDetailPage() {
     });
 
     return (
-        <Page pageId="zone-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dev-server/test-plugins/reviews/dashboard/index.tsx

@@ -7,7 +7,7 @@ import { CustomWidget } from './custom-widget';
 import { reviewDetail } from './review-detail';
 import { reviewList } from './review-list';
 
-export default defineDashboardExtension({
+defineDashboardExtension({
     routes: [reviewList, reviewDetail],
     widgets: [
         {
@@ -19,7 +19,7 @@ export default defineDashboardExtension({
     ],
     actionBarItems: [
         {
-            label: 'Custom Action Bar Item',
+            pageId: 'product-detail',
             component: props => {
                 return (
                     <Button
@@ -32,7 +32,6 @@ export default defineDashboardExtension({
                     </Button>
                 );
             },
-            locationId: 'product-detail',
         },
     ],
     pageBlocks: [
@@ -55,6 +54,39 @@ export default defineDashboardExtension({
             component: TextareaCustomField,
         },
     ],
+    detailForms: [
+        {
+            pageId: 'product-variant-detail',
+            extendDetailDocument: `
+                query {
+                    productVariant(id: $id) {
+                        stockOnHand
+                        product {
+                          facetValues {
+                            id
+                            name
+                            facet {
+                            code
+                            }
+                          }
+                          customFields {
+                            featuredReview {
+                                id
+                                productVariant {
+                                    id
+                                    name
+                                }
+                                product {
+                                name
+                                }
+                            }
+                          }
+                        }
+                    }
+                }
+            `,
+        },
+    ],
     dataTables: [
         {
             pageId: 'product-list',