@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/app/routes/_authenticated/_system/scheduled-tasks.tsx

@@ -1,24 +1,28 @@
-import { FullWidthPageBlock, Page, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { DataTable } from '@/components/data-table/data-table.js';
-import { Trans, useLingui } from '@/lib/trans.js';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createFileRoute } from '@tanstack/react-router';
-import { createColumnHelper } from '@tanstack/react-table';
-import { ResultOf } from '@/graphql/graphql.js';
-import { PayloadDialog } from './components/payload-dialog.js';
-import { Button } from '@/components/ui/button.js';
-import { Badge } from '@/components/ui/badge.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { DataTable } from '@/vdb/components/data-table/data-table.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import {
+    FullWidthPageBlock,
+    Page,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { createColumnHelper } from '@tanstack/react-table';
 import { CirclePlay, EllipsisIcon } from 'lucide-react';
 import { toast } from 'sonner';
+import { PayloadDialog } from './components/payload-dialog.js';
 
 export const Route = createFileRoute('/_authenticated/_system/scheduled-tasks')({
     component: ScheduledTasksPage,
@@ -53,7 +57,7 @@ const updateScheduledTaskDocument = graphql(`
 const runScheduledTaskDocument = graphql(`
     mutation RunScheduledTask($id: String!) {
         runScheduledTask(id: $id) {
-          success
+            success
         }
     }
 `);
@@ -69,16 +73,16 @@ function ScheduledTasksPage() {
     const queryClient = useQueryClient();
     const { mutate: updateScheduledTask } = useMutation({
         mutationFn: api.mutate(updateScheduledTaskDocument),
-        onSuccess: (result) => {
+        onSuccess: result => {
             refreshScheduledTasks();
         },
     });
     const refreshScheduledTasks = () => {
         queryClient.invalidateQueries({ queryKey: ['scheduledTasks'] });
-    }
+    };
     const { mutate: runScheduledTask } = useMutation({
         mutationFn: api.mutate(runScheduledTaskDocument),
-        onSuccess: (result) => {
+        onSuccess: result => {
             if ((result as ResultOf<typeof runScheduledTaskDocument>).runScheduledTask.success) {
                 toast.success(i18n.t(`Scheduled task will be executed`));
                 queryClient.invalidateQueries({ queryKey: ['scheduledTasks'] });
@@ -194,16 +198,18 @@ function ScheduledTasksPage() {
                             </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent>
-                            {row.original.enabled && <DropdownMenuItem
-                                onClick={() =>
-                                    runScheduledTask({
-                                        id: row.original.id,
-                                    })
-                                }
-                            >
-                                <CirclePlay className="w-4 h-4" />
-                                <Trans>Run</Trans>
-                            </DropdownMenuItem>}
+                            {row.original.enabled && (
+                                <DropdownMenuItem
+                                    onClick={() =>
+                                        runScheduledTask({
+                                            id: row.original.id,
+                                        })
+                                    }
+                                >
+                                    <CirclePlay className="w-4 h-4" />
+                                    <Trans>Run</Trans>
+                                </DropdownMenuItem>
+                            )}
                             <DropdownMenuItem
                                 onClick={() =>
                                     updateScheduledTask({

package/src/app/routes/_authenticated/_tax-categories/components/tax-category-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteTaxCategoriesDocument } from '../tax-categories.graphql.js';
+
+export const DeleteTaxCategoriesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteTaxCategoriesDocument}
+            entityName="tax categories"
+            requiredPermissions={['DeleteTaxCategory']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

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

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const taxCategoryItemFragment = graphql(`
     fragment TaxCategoryItem on TaxCategory {
@@ -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
@@ -61,3 +61,12 @@ export const deleteTaxCategoryDocument = graphql(`
         }
     }
 `);
+
+export const deleteTaxCategoriesDocument = graphql(`
+    mutation DeleteTaxCategories($ids: [ID!]!) {
+        deleteTaxCategories(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_tax-categories/tax-categories.tsx

@@ -1,12 +1,13 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteTaxCategoriesBulkAction } from './components/tax-category-bulk-actions.js';
 import { deleteTaxCategoryDocument, taxCategoryListQuery } from './tax-categories.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories')({
@@ -49,6 +50,12 @@ function TaxCategoryListPage() {
                     ),
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteTaxCategoriesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateTaxCategory']}>

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

@@ -1,10 +1,10 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -14,22 +14,25 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 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}>
+        <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/components/tax-rate-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteTaxRatesDocument } from '../tax-rates.graphql.js';
+
+export const DeleteTaxRatesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteTaxRatesDocument}
+            entityName="tax rates"
+            requiredPermissions={['DeleteTaxRate']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

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

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const taxRateItemFragment = graphql(`
     fragment TaxRateItem on TaxRate {
@@ -37,7 +37,7 @@ export const taxRateListQuery = graphql(
     [taxRateItemFragment],
 );
 
-export const taxRateDetailQuery = graphql(
+export const taxRateDetailDocument = graphql(
     `
         query TaxRateDetail($id: ID!) {
             taxRate(id: $id) {
@@ -73,3 +73,12 @@ export const deleteTaxRateDocument = graphql(`
         }
     }
 `);
+
+export const deleteTaxRatesDocument = graphql(`
+    mutation DeleteTaxRates($ids: [ID!]!) {
+        deleteTaxRates(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -1,15 +1,16 @@
-import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { api } from '@/graphql/api.js';
-import { Trans } from '@/lib/trans.js';
+import { BooleanDisplayBadge } from '@/vdb/components/data-display/boolean.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
 import { zoneListQuery } from '../_zones/zones.graphql.js';
+import { DeleteTaxRatesBulkAction } from './components/tax-rate-bulk-actions.js';
 import { deleteTaxRateDocument, taxRateListQuery } from './tax-rates.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
@@ -92,6 +93,12 @@ function TaxRateListPage() {
                     cell: ({ row }) => `${row.original.value}%`,
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteTaxRatesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateTaxRate']}>

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

@@ -1,13 +1,13 @@
-import { AffixedInput } from '@/components/data-input/affixed-input.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { TaxCategorySelector } from '@/components/shared/tax-category-selector.js';
-import { ZoneSelector } from '@/components/shared/zone-selector.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { AffixedInput } from '@/vdb/components/data-input/affixed-input.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TaxCategorySelector } from '@/vdb/components/shared/tax-category-selector.js';
+import { ZoneSelector } from '@/vdb/components/shared/zone-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -17,18 +17,21 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/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}>
+        <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/components/zone-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteZonesDocument } from '../zones.graphql.js';
+
+export const DeleteZonesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteZonesDocument}
+            entityName="zones"
+            requiredPermissions={['DeleteZone']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_zones/components/zone-countries-sheet.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@/components/ui/button.js';
-import { ScrollArea } from '@/components/ui/scroll-area.js';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/vdb/components/ui/sheet.js';
 import { ZoneCountriesTable } from './zone-countries-table.js';
 
 interface ZoneCountriesSheetProps {
@@ -9,7 +9,7 @@ interface ZoneCountriesSheetProps {
     children?: React.ReactNode;
 }
 
-export function ZoneCountriesSheet({ zoneId, zoneName, children }: ZoneCountriesSheetProps) {
+export function ZoneCountriesSheet({ zoneId, zoneName, children }: Readonly<ZoneCountriesSheetProps>) {
     return (
         <Sheet>
             <SheetTrigger asChild>

package/src/app/routes/_authenticated/_zones/components/zone-countries-table.tsx

@@ -1,17 +1,21 @@
-import { DataTable } from '@/components/data-table/data-table.js';
-import { api } from '@/graphql/api.js';
+import { DataTable } from '@/vdb/components/data-table/data-table.js';
+import { CountrySelector } from '@/vdb/components/shared/country-selector.js';
+import { api } from '@/vdb/graphql/api.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { ColumnDef } from '@tanstack/react-table';
 import { useMemo, useState } from 'react';
-import { addCountryToZoneMutation, removeCountryFromZoneMutation, zoneMembersQuery } from '../zones.graphql.js';
-import { CountrySelector } from '@/components/shared/country-selector.js';
+import {
+    addCountryToZoneMutation,
+    removeCountryFromZoneMutation,
+    zoneMembersQuery,
+} from '../zones.graphql.js';
 
 interface ZoneCountriesTableProps {
     zoneId: string;
     canAddCountries?: boolean;
 }
 
-export function ZoneCountriesTable({ zoneId, canAddCountries = false }: ZoneCountriesTableProps) {
+export function ZoneCountriesTable({ zoneId, canAddCountries = false }: Readonly<ZoneCountriesTableProps>) {
     const { data, refetch } = useQuery({
         queryKey: ['zone', zoneId],
         queryFn: () => api.query(zoneMembersQuery, { zoneId }),
@@ -24,13 +28,6 @@ export function ZoneCountriesTable({ zoneId, canAddCountries = false }: ZoneCoun
         },
     });
 
-    const { mutate: removeCountryFromZone } = useMutation({
-        mutationFn: api.mutate(removeCountryFromZoneMutation),
-        onSuccess: () => {
-            refetch();
-        },
-    });
-
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
 
@@ -59,9 +56,9 @@ export function ZoneCountriesTable({ zoneId, canAddCountries = false }: ZoneCoun
                 columns={columns}
                 data={paginatedItems ?? []}
                 onPageChange={(table, page, itemsPerPage) => {
-                setPage(page);
-                setPageSize(itemsPerPage);
-            }}
+                    setPage(page);
+                    setPageSize(itemsPerPage);
+                }}
                 totalItems={data?.zone?.members?.length ?? 0}
             />
             {canAddCountries && (

package/src/app/routes/_authenticated/_zones/zones.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const zoneItemFragment = graphql(`
     fragment ZoneItem on Zone {
@@ -42,7 +42,7 @@ export const zoneMembersQuery = graphql(`
     }
 `);
 
-export const zoneDetailQuery = graphql(
+export const zoneDetailDocument = graphql(
     `
         query ZoneDetail($id: ID!) {
             zone(id: $id) {
@@ -94,3 +94,12 @@ export const deleteZoneDocument = graphql(`
         }
     }
 `);
+
+export const deleteZonesDocument = graphql(`
+    mutation DeleteZones($ids: [ID!]!) {
+        deleteZones(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_zones/zones.tsx

@@ -1,11 +1,12 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteZonesBulkAction } from './components/zone-bulk-actions.js';
 import { ZoneCountriesSheet } from './components/zone-countries-sheet.js';
 import { deleteZoneDocument, zoneListQuery } from './zones.graphql.js';
 
@@ -41,6 +42,12 @@ function ZoneListPage() {
                     ),
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteZonesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateZone']}>

package/src/app/routes/_authenticated/_zones/zones_.$id.tsx

@@ -1,9 +1,9 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-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 { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -13,19 +13,22 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/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}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>