@vendure/dashboard 3.3.6-master-202507010243 → 3.3.6-master-202507010922

package/src/app/routes/_authenticated/_product-variants/components/product-variant-bulk-actions.tsx

@@ -10,7 +10,6 @@ import { ResultOf } from '@/graphql/graphql.js';
 import { useChannel, usePaginatedList } from '@/index.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 
-import { Permission } from '@vendure/common/lib/generated-types';
 import { AssignFacetValuesDialog } from '../../_products/components/assign-facet-values-dialog.js';
 import { AssignToChannelDialog } from '../../_products/components/assign-to-channel-dialog.js';
 import {
@@ -52,7 +51,7 @@ export const DeleteProductVariantsBulkAction: BulkActionComponent<any> = ({ sele
     });
     return (
         <DataTableBulkActionItem
-            requiresPermission={[Permission.DeleteCatalog, Permission.DeleteProduct]}
+            requiresPermission={['DeleteCatalog', 'DeleteProduct']}
             onClick={() => mutate({ ids: selection.map(s => s.id) })}
             label={<Trans>Delete</Trans>}
             confirmationText={
@@ -81,7 +80,7 @@ export const AssignProductVariantsToChannelBulkAction: BulkActionComponent<any>
     return (
         <>
             <DataTableBulkActionItem
-                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+                requiresPermission={['UpdateCatalog', 'UpdateProduct']}
                 onClick={() => setDialogOpen(true)}
                 label={<Trans>Assign to channel</Trans>}
                 icon={LayersIcon}
@@ -134,7 +133,7 @@ export const RemoveProductVariantsFromChannelBulkAction: BulkActionComponent<any
 
     return (
         <DataTableBulkActionItem
-            requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+            requiresPermission={['UpdateCatalog', 'UpdateProduct']}
             onClick={handleRemove}
             label={<Trans>Remove from current channel</Trans>}
             confirmationText={
@@ -164,7 +163,7 @@ export const AssignFacetValuesToProductVariantsBulkAction: BulkActionComponent<a
     return (
         <>
             <DataTableBulkActionItem
-                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+                requiresPermission={['UpdateCatalog', 'UpdateProduct']}
                 onClick={() => setDialogOpen(true)}
                 label={<Trans>Edit facet values</Trans>}
                 icon={TagIcon}

package/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>

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { CopyIcon, LayersIcon, TagIcon, TrashIcon } from 'lucide-react';
+import { LayersIcon, TagIcon, TrashIcon } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
@@ -9,12 +9,10 @@ import { api } from '@/graphql/api.js';
 import { ResultOf } from '@/graphql/graphql.js';
 import { useChannel, usePaginatedList } from '@/index.js';
 import { Trans, useLingui } from '@/lib/trans.js';
-
-import { Permission } from '@vendure/common/lib/generated-types';
+import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {
     assignProductsToChannelDocument,
     deleteProductsDocument,
-    duplicateEntityDocument,
     getProductsWithFacetValuesByIdsDocument,
     productDetailDocument,
     removeProductsFromChannelDocument,
@@ -53,7 +51,7 @@ export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection,
     });
     return (
         <DataTableBulkActionItem
-            requiresPermission={[Permission.DeleteCatalog, Permission.DeleteProduct]}
+            requiresPermission={['DeleteCatalog', 'DeleteProduct']}
             onClick={() => mutate({ ids: selection.map(s => s.id) })}
             label={<Trans>Delete</Trans>}
             confirmationText={<Trans>Are you sure you want to delete {selection.length} products?</Trans>}
@@ -80,7 +78,7 @@ export const AssignProductsToChannelBulkAction: BulkActionComponent<any> = ({ se
     return (
         <>
             <DataTableBulkActionItem
-                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+                requiresPermission={['UpdateCatalog', 'UpdateProduct']}
                 onClick={() => setDialogOpen(true)}
                 label={<Trans>Assign to channel</Trans>}
                 icon={LayersIcon}
@@ -128,7 +126,7 @@ export const RemoveProductsFromChannelBulkAction: BulkActionComponent<any> = ({
 
     return (
         <DataTableBulkActionItem
-            requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+            requiresPermission={['UpdateCatalog', 'UpdateProduct']}
             onClick={handleRemove}
             label={<Trans>Remove from current channel</Trans>}
             confirmationText={
@@ -154,7 +152,7 @@ export const AssignFacetValuesToProductsBulkAction: BulkActionComponent<any> = (
     return (
         <>
             <DataTableBulkActionItem
-                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+                requiresPermission={['UpdateCatalog', 'UpdateProduct']}
                 onClick={() => setDialogOpen(true)}
                 label={<Trans>Edit facet values</Trans>}
                 icon={TagIcon}
@@ -174,105 +172,20 @@ export const AssignFacetValuesToProductsBulkAction: BulkActionComponent<any> = (
 };
 
 export const DuplicateProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { refetchPaginatedList } = usePaginatedList();
-    const { i18n } = useLingui();
-    const [isDuplicating, setIsDuplicating] = useState(false);
-    const [progress, setProgress] = useState({ completed: 0, total: 0 });
-
-    const { mutateAsync } = useMutation({
-        mutationFn: api.mutate(duplicateEntityDocument),
-    });
-
-    const handleDuplicate = async () => {
-        if (isDuplicating) return;
-
-        setIsDuplicating(true);
-        setProgress({ completed: 0, total: selection.length });
-
-        const results = {
-            success: 0,
-            failed: 0,
-            errors: [] as string[],
-        };
-
-        try {
-            // Process products sequentially to avoid overwhelming the server
-            for (let i = 0; i < selection.length; i++) {
-                const product = selection[i];
-
-                try {
-                    const result = await mutateAsync({
-                        input: {
-                            entityName: 'Product',
-                            entityId: product.id,
-                            duplicatorInput: {
-                                code: 'product-duplicator',
-                                arguments: [
-                                    {
-                                        name: 'includeVariants',
-                                        value: 'true',
-                                    },
-                                ],
-                            },
-                        },
-                    });
-
-                    if ('newEntityId' in result.duplicateEntity) {
-                        results.success++;
-                    } else {
-                        results.failed++;
-                        const errorMsg =
-                            result.duplicateEntity.message ||
-                            result.duplicateEntity.duplicationError ||
-                            'Unknown error';
-                        results.errors.push(`Product ${product.name || product.id}: ${errorMsg}`);
-                    }
-                } catch (error) {
-                    results.failed++;
-                    results.errors.push(
-                        `Product ${product.name || product.id}: ${error instanceof Error ? error.message : 'Unknown error'}`,
-                    );
-                }
-
-                setProgress({ completed: i + 1, total: selection.length });
-            }
-
-            // Show results
-            if (results.success > 0) {
-                toast.success(i18n.t(`Successfully duplicated ${results.success} products`));
-            }
-            if (results.failed > 0) {
-                const errorMessage =
-                    results.errors.length > 3
-                        ? `${results.errors.slice(0, 3).join(', ')}... and ${results.errors.length - 3} more`
-                        : results.errors.join(', ');
-                toast.error(`Failed to duplicate ${results.failed} products: ${errorMessage}`);
-            }
-
-            if (results.success > 0) {
-                refetchPaginatedList();
-                table.resetRowSelection();
-            }
-        } finally {
-            setIsDuplicating(false);
-            setProgress({ completed: 0, total: 0 });
-        }
-    };
-
     return (
-        <DataTableBulkActionItem
-            requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
-            onClick={handleDuplicate}
-            label={
-                isDuplicating ? (
-                    <Trans>
-                        Duplicating... ({progress.completed}/{progress.total})
-                    </Trans>
-                ) : (
-                    <Trans>Duplicate</Trans>
-                )
-            }
-            icon={CopyIcon}
+        <DuplicateBulkAction
+            entityType="Product"
+            duplicatorCode="product-duplicator"
+            duplicatorArguments={[
+                {
+                    name: 'includeVariants',
+                    value: 'true',
+                },
+            ]}
+            requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
+            entityName="Product"
+            selection={selection}
+            table={table}
         />
     );
 };

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -187,20 +187,3 @@ export const getProductsWithFacetValuesByIdsDocument = graphql(`
         }
     }
 `);
-
-export const duplicateEntityDocument = graphql(`
-    mutation DuplicateEntity($input: DuplicateEntityInput!) {
-        duplicateEntity(input: $input) {
-            ... on DuplicateEntitySuccess {
-                newEntityId
-            }
-            ... on ErrorResult {
-                errorCode
-                message
-            }
-            ... on DuplicateEntityError {
-                duplicationError
-            }
-        }
-    }
-`);

package/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>

package/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>

package/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>

package/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>

package/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>

package/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>

package/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

package/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>

package/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) {

package/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>

package/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) {

package/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>

package/src/lib/components/shared/custom-fields-form.tsx

@@ -41,7 +41,12 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
     const customFields = useCustomFieldConfig(entityType);
 
     const getFieldName = (fieldDef: CustomFieldConfig) => {
-        const name = fieldDef.type === 'relation' ? fieldDef.name + 'Id' : fieldDef.name;
+        const name =
+            fieldDef.type === 'relation'
+                ? fieldDef.list
+                    ? fieldDef.name + 'Ids'
+                    : fieldDef.name + 'Id'
+                : fieldDef.name;
         return formPathPrefix ? `${formPathPrefix}.customFields.${name}` : `customFields.${name}`;
     };
 
@@ -266,6 +271,18 @@ function FormInputForType({
             );
         case 'boolean':
             return <Switch checked={field.value} onCheckedChange={field.onChange} disabled={isReadonly} />;
+        case 'relation':
+            if (fieldDef.list) {
+                return (
+                    <Input
+                        {...field}
+                        onChange={e => field.onChange(e.target.value.split(','))}
+                        disabled={isReadonly}
+                    />
+                );
+            } else {
+                return <Input {...field} disabled={isReadonly} />;
+            }
         default:
             return <Input {...field} disabled={isReadonly} />;
     }