@vendure/dashboard 3.6.0-minor-202511061555 → 3.6.0-minor-202512161252

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

@@ -1,14 +1,15 @@
 import { DataTable } from '@/vdb/components/data-table/data-table.js';
+import { useGeneratedColumns } from '@/vdb/components/data-table/use-generated-columns.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 { Trans } from '@lingui/react/macro';
 import { useMemo, useState } from 'react';
 import {
     addCountryToZoneMutation,
-    removeCountryFromZoneMutation,
     zoneMembersQuery,
 } from '../zones.graphql.js';
+import { removeCountryFromZoneBulkAction } from './zone-bulk-actions.js';
 
 interface ZoneCountriesTableProps {
     zoneId: string;
@@ -35,31 +36,48 @@ export function ZoneCountriesTable({ zoneId, canAddCountries = false }: Readonly
         return data?.zone?.members?.slice((page - 1) * pageSize, page * pageSize);
     }, [data, page, pageSize]);
 
-    const columns: ColumnDef<any>[] = [
-        {
-            header: 'Country',
-            accessorKey: 'name',
-        },
-        {
-            header: 'Enabled',
-            accessorKey: 'enabled',
-        },
-        {
-            header: 'Code',
-            accessorKey: 'code',
+    const bulkActions = useMemo(
+        () => [
+            {
+                component: removeCountryFromZoneBulkAction(zoneId),
+                order: 500,
+            },
+        ],
+        [zoneId],
+    );
+
+    const { columns } = useGeneratedColumns({
+        fields: [],
+        additionalColumns: {
+            name: {
+                header: () => <Trans>Country</Trans>,
+                accessorKey: 'name',
+            },
+            enabled: {
+                header: () => <Trans>Enabled</Trans>,
+                accessorKey: 'enabled',
+            },
+            code: {
+                header: () => <Trans>Code</Trans>,
+                accessorKey: 'code',
+            },
         },
-    ];
+        bulkActions,
+        includeActionsColumn: false,
+        enableSorting: false,
+    });
 
     return (
         <div>
             <DataTable
-                columns={columns}
+                columns={columns as any}
                 data={paginatedItems ?? []}
                 onPageChange={(table, page, itemsPerPage) => {
                     setPage(page);
                     setPageSize(itemsPerPage);
                 }}
                 totalItems={data?.zone?.members?.length ?? 0}
+                bulkActions={bulkActions}
             />
             {canAddCountries && (
                 <CountrySelector

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

@@ -1,7 +1,6 @@
 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 { ActionBarItem } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
@@ -48,16 +47,14 @@ function ZoneListPage() {
                 },
             ]}
         >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreateZone']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon />
-                            <Trans>New Zone</Trans>
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
+            <ActionBarItem itemId="create-button" requiresPermission={['CreateZone']}>
+                <Button asChild>
+                    <Link to="./new">
+                        <PlusIcon />
+                        <Trans>New Zone</Trans>
+                    </Link>
+                </Button>
+            </ActionBarItem>
         </ListPage>
     );
 }

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

@@ -1,15 +1,14 @@
 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 {
+    ActionBarItem,
     CustomFieldsPageBlock,
     DetailFormGrid,
     Page,
     PageActionBar,
-    PageActionBarRight,
     PageBlock,
     PageLayout,
     PageTitle,
@@ -76,16 +75,14 @@ function ZoneDetailPage() {
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
-                <PageActionBarRight>
-                    <PermissionGuard requires={['UpdateZone']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                        >
-                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
-                        </Button>
-                    </PermissionGuard>
-                </PageActionBarRight>
+                <ActionBarItem itemId="save-button" requiresPermission={['UpdateZone']}>
+                    <Button
+                        type="submit"
+                        disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                    >
+                        {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                    </Button>
+                </ActionBarItem>
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="main" blockId="main-form">

package/src/app/routes/_authenticated/index.tsx

@@ -12,10 +12,10 @@ import {
 } from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
 import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
 import {
+    ActionBarItem,
     FullWidthPageBlock,
     Page,
     PageActionBar,
-    PageActionBarRight,
     PageLayout,
     PageTitle,
 } from '@/vdb/framework/layout-engine/page-layout.js';
@@ -181,19 +181,21 @@ function DashboardPage() {
                 <Trans>Insights</Trans>
             </PageTitle>
             <PageActionBar>
-                <PageActionBarRight>
+                <ActionBarItem itemId="date-range-picker">
                     <DateRangePicker
                         dateRange={dateRange}
                         onDateRangeChange={setDateRange}
                         className="mr-2"
                     />
+                </ActionBarItem>
+                <ActionBarItem itemId="edit-layout-button">
                     <Button
                         variant={editMode ? 'default' : 'outline'}
                         onClick={() => setEditMode(prev => !prev)}
                     >
                         {editMode ? t`Save Layout` : t`Edit Layout`}
                     </Button>
-                </PageActionBarRight>
+                </ActionBarItem>
             </PageActionBar>
             <PageLayout>
                 <FullWidthPageBlock blockId="widgets">