@vendure/dashboard 3.4.3-master-202509190229 → 3.4.3-master-202509230228

package/src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx

@@ -15,11 +15,11 @@ import {
     PageLayout,
     PageTitle,
 } from '@/vdb/framework/layout-engine/page-layout.js';
-import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { createFileRoute, Link, redirect, useNavigate } from '@tanstack/react-router';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
 import { User } from 'lucide-react';
 import { toast } from 'sonner';
@@ -44,33 +44,11 @@ import {
     unsetBillingAddressForDraftOrderDocument,
     unsetShippingAddressForDraftOrderDocument,
 } from './orders.graphql.js';
+import { loadDraftOrder } from './utils/order-detail-loaders.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders_/draft/$id')({
     component: DraftOrderPage,
-    loader: async ({ context, params }) => {
-        if (!params.id) {
-            throw new Error('ID param is required');
-        }
-
-        const result: ResultOf<typeof orderDetailDocument> = await context.queryClient.ensureQueryData(
-            getDetailQueryOptions(addCustomFields(orderDetailDocument), { id: params.id }),
-            { id: params.id },
-        );
-
-        if (!result.order) {
-            throw new Error(`Order with the ID ${params.id} was not found`);
-        }
-
-        if (result.order.state !== 'Draft') {
-            throw redirect({
-                to: `/orders/${params.id}`,
-            });
-        }
-
-        return {
-            breadcrumb: [{ path: '/orders', label: <Trans>Orders</Trans> }, result.order.code],
-        };
-    },
+    loader: ({ context, params }) => loadDraftOrder(context, params),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
 });
 

package/src/app/routes/_authenticated/_orders/utils/order-detail-loaders.tsx

@@ -0,0 +1,129 @@
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { getDetailQueryOptions } from '@/vdb/framework/page/use-detail-page.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { redirect } from '@tanstack/react-router';
+import { OrderDetail } from '../components/order-detail-shared.js';
+import { orderDetailDocument } from '../orders.graphql.js';
+
+export async function commonRegularOrderLoader(context: any, params: { id: string }): Promise<OrderDetail> {
+    if (!params.id) {
+        throw new Error('ID param is required');
+    }
+
+    const result: ResultOf<typeof orderDetailDocument> = await context.queryClient.ensureQueryData(
+        getDetailQueryOptions(addCustomFields(orderDetailDocument), { id: params.id }),
+    );
+
+    if (!result.order) {
+        throw new Error(`Order with the ID ${params.id} was not found`);
+    }
+
+    if (result.order.state === 'Draft') {
+        throw redirect({
+            to: `/orders/draft/${params.id}`,
+        });
+    }
+    return result.order;
+}
+
+export async function loadRegularOrder(context: any, params: { id: string }) {
+    const order = await commonRegularOrderLoader(context, params);
+
+    if (order.state === 'Modifying') {
+        throw redirect({
+            to: `/orders/${params.id}/modify`,
+        });
+    }
+
+    return {
+        breadcrumb: [{ path: '/orders', label: <Trans>Orders</Trans> }, order.code],
+    };
+}
+
+export async function loadDraftOrder(context: any, params: { id: string }) {
+    const order = await commonRegularOrderLoader(context, params);
+
+    if (order.state !== 'Draft') {
+        throw redirect({
+            to: `/orders/${params.id}`,
+        });
+    }
+
+    return {
+        breadcrumb: [{ path: '/orders', label: <Trans>Orders</Trans> }, order.code],
+    };
+}
+
+export async function loadModifyingOrder(context: any, params: { id: string }) {
+    const order = await commonRegularOrderLoader(context, params);
+    if (order.state !== 'Modifying') {
+        throw redirect({
+            to: `/orders/${params.id}`,
+        });
+    }
+
+    return {
+        breadcrumb: [
+            { path: '/orders', label: <Trans>Orders</Trans> },
+            order.code,
+            { label: <Trans>Modify</Trans> },
+        ],
+    };
+}
+
+export async function loadSellerOrder(
+    context: any,
+    params: { aggregateOrderId: string; sellerOrderId: string },
+) {
+    if (!params.sellerOrderId || !params.aggregateOrderId) {
+        throw new Error('Both seller order ID and aggregate order ID params are required');
+    }
+
+    const result: ResultOf<typeof orderDetailDocument> = await context.queryClient.ensureQueryData(
+        getDetailQueryOptions(addCustomFields(orderDetailDocument), { id: params.sellerOrderId }),
+    );
+
+    if (!result.order) {
+        throw new Error(`Seller order with the ID ${params.sellerOrderId} was not found`);
+    }
+
+    // Verify this is actually a seller order by checking if it has an aggregateOrder
+    if (!result.order.aggregateOrder) {
+        throw new Error(`Order ${params.sellerOrderId} is not a seller order`);
+    }
+
+    // Verify the aggregate order ID matches
+    if (result.order.aggregateOrder.id !== params.aggregateOrderId) {
+        throw new Error(
+            `Seller order ${params.sellerOrderId} does not belong to aggregate order ${params.aggregateOrderId}`,
+        );
+    }
+
+    if (result.order.state === 'Draft') {
+        throw redirect({
+            to: `/orders/draft/${params.sellerOrderId}`,
+        });
+    }
+
+    if (result.order.state === 'Modifying') {
+        throw redirect({
+            to: `/orders/${params.sellerOrderId}/modify`,
+        });
+    }
+
+    return {
+        breadcrumb: [
+            { path: '/orders', label: <Trans>Orders</Trans> },
+            {
+                path: `/orders/${params.aggregateOrderId}`,
+                label: result.order.aggregateOrder.code,
+            },
+            {
+                path: `/orders/${params.aggregateOrderId}`,
+                label: 'Seller orders',
+            },
+            result.order.code,
+        ],
+    };
+}

package/src/app/routes/_authenticated/_orders/utils/order-utils.ts

@@ -1,3 +1,5 @@
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
+
 import { Fulfillment, Order, Payment } from './order-types.js';
 
 /**
@@ -76,3 +78,9 @@ export function canAddFulfillment(order: Order): boolean {
         isFulfillableState
     );
 }
+
+export function getSeller<T>(order: { channels: Array<{ code: string; seller: T }> }) {
+    // Find the seller channel (non-default channel)
+    const sellerChannel = order.channels.find(channel => channel.code !== DEFAULT_CHANNEL_CODE);
+    return sellerChannel?.seller;
+}

package/src/app/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -12,7 +12,7 @@ import {
     DeletePaymentMethodsBulkAction,
     RemovePaymentMethodsFromChannelBulkAction,
 } from './components/payment-method-bulk-actions.js';
-import { deletePaymentMethodDocument, paymentMethodListQuery } from './payment-methods.graphql.js';
+import { paymentMethodListQuery } from './payment-methods.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods')({
     component: PaymentMethodListPage,
@@ -24,7 +24,6 @@ function PaymentMethodListPage() {
         <ListPage
             pageId="payment-method-list"
             listQuery={paymentMethodListQuery}
-            deleteMutation={deletePaymentMethodDocument}
             route={Route}
             title="Payment Methods"
             defaultVisibility={{

package/src/app/routes/_authenticated/_product-variants/product-variants.tsx

@@ -11,7 +11,7 @@ import {
     DeleteProductVariantsBulkAction,
     RemoveProductVariantsFromChannelBulkAction,
 } from './components/product-variant-bulk-actions.js';
-import { deleteProductVariantDocument, productVariantListDocument } from './product-variants.graphql.js';
+import { productVariantListDocument } from './product-variants.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_product-variants/product-variants')({
     component: ProductListPage,
@@ -25,7 +25,6 @@ function ProductListPage() {
             pageId="product-variant-list"
             title={<Trans>Product Variants</Trans>}
             listQuery={productVariantListDocument}
-            deleteMutation={deleteProductVariantDocument}
             bulkActions={[
                 {
                     component: AssignProductVariantsToChannelBulkAction,

package/src/app/routes/_authenticated/_products/products.tsx

@@ -13,7 +13,7 @@ import {
     DuplicateProductsBulkAction,
     RemoveProductsFromChannelBulkAction,
 } from './components/product-bulk-actions.js';
-import { deleteProductDocument, productListDocument } from './products.graphql.js';
+import { productListDocument } from './products.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products')({
     component: ProductListPage,
@@ -25,7 +25,6 @@ function ProductListPage() {
         <ListPage
             pageId="product-list"
             listQuery={productListDocument}
-            deleteMutation={deleteProductDocument}
             title="Products"
             customizeColumns={{
                 name: {

package/src/app/routes/_authenticated/_promotions/promotions.tsx

@@ -13,7 +13,7 @@ import {
     DuplicatePromotionsBulkAction,
     RemovePromotionsFromChannelBulkAction,
 } from './components/promotion-bulk-actions.js';
-import { deletePromotionDocument, promotionListDocument } from './promotions.graphql.js';
+import { promotionListDocument } from './promotions.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_promotions/promotions')({
     component: PromotionListPage,
@@ -25,7 +25,6 @@ function PromotionListPage() {
         <ListPage
             pageId="promotion-list"
             listQuery={promotionListDocument}
-            deleteMutation={deletePromotionDocument}
             route={Route}
             title="Promotions"
             defaultVisibility={{

package/src/app/routes/_authenticated/_roles/components/permissions-table-grid.tsx

@@ -0,0 +1,251 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { Table, TableBody, TableCell, TableRow } from '@/vdb/components/ui/table.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { ServerConfig } from '@/vdb/providers/server-config.js';
+import { InfoIcon } from 'lucide-react';
+
+interface PermissionsTableGridProps {
+    value: string[];
+    onChange: (permissions: string[]) => void;
+    readonly?: boolean;
+}
+
+export function PermissionsTableGrid({
+    value,
+    onChange,
+    readonly = false,
+}: Readonly<PermissionsTableGridProps>) {
+    const { i18n } = useLingui();
+    const groupedPermissions = useGroupedPermissions();
+
+    const setPermission = (permission: string, checked: boolean) => {
+        if (readonly) return;
+
+        const newPermissions = checked ? [...value, permission] : value.filter(p => p !== permission);
+        onChange(newPermissions);
+    };
+
+    const toggleAll = (defs: ServerConfig['permissions']) => {
+        if (readonly) return;
+
+        const shouldEnable = defs.some(d => !value.includes(d.name));
+        const newPermissions = shouldEnable
+            ? [...new Set([...value, ...defs.map(d => d.name)])]
+            : value.filter(p => !defs.some(d => d.name === p));
+        onChange(newPermissions);
+    };
+
+    // Extract CRUD operation from permission name (e.g., "CreateAdministrator" -> "Create")
+    const getPermissionLabel = (permission: ServerConfig['permissions'][0], groupLabel: string) => {
+        const name = permission.name;
+        const crudPrefixes = ['Create', 'Read', 'Update', 'Delete'];
+
+        for (const prefix of crudPrefixes) {
+            if (name.startsWith(prefix)) {
+                // Check if the rest matches the group name (singular form)
+                const remainder = name.substring(prefix.length);
+                const groupSingular = groupLabel.replace(/s$/, ''); // Simple singularization
+                if (remainder.toLowerCase() === groupSingular.toLowerCase().replace(/\s/g, '')) {
+                    return prefix;
+                }
+            }
+        }
+
+        // Fallback to full name if not a CRUD operation
+        return i18n.t(name);
+    };
+
+    return (
+        <div className="w-full">
+            {/* Desktop Table View */}
+            <div className="hidden md:block border rounded-lg">
+                <Table>
+                    <TableBody>
+                        {groupedPermissions.map((section, index) => (
+                            <TableRow key={index} className="hover:bg-transparent">
+                                <TableCell className="bg-muted/50 p-3 align-top w-[150px] min-w-[150px] border-r">
+                                    <div className="space-y-2">
+                                        <div className="flex items-center gap-2">
+                                            <span className="font-semibold text-sm">
+                                                {i18n.t(section.label)}
+                                            </span>
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                        <InfoIcon className="h-3 w-3 text-muted-foreground" />
+                                                    </TooltipTrigger>
+                                                    <TooltipContent side="right" className="max-w-[250px]">
+                                                        <p className="text-xs">
+                                                            {i18n.t(section.description)}
+                                                        </p>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                        </div>
+                                        {section.permissions.length > 1 && !readonly && (
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                onClick={() => toggleAll(section.permissions)}
+                                                className="h-6 px-2 text-xs"
+                                            >
+                                                <Trans>Toggle all</Trans>
+                                            </Button>
+                                        )}
+                                    </div>
+                                </TableCell>
+                                {sortPermissions(section.permissions).map((permission, permIndex) => (
+                                    <TableCell
+                                        key={permission.name}
+                                        className="p-2 text-center align-top min-w-[80px]"
+                                        colSpan={section.permissions.length === 1 ? 4 : 1}
+                                    >
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <div className="flex flex-col items-center space-y-1.5">
+                                                        <Switch
+                                                            id={`${section.id}-${permission.name}`}
+                                                            checked={value.includes(permission.name)}
+                                                            onCheckedChange={checked =>
+                                                                setPermission(permission.name, checked)
+                                                            }
+                                                            disabled={readonly}
+                                                            className="scale-90"
+                                                        />
+                                                        <label
+                                                            htmlFor={`${section.id}-${permission.name}`}
+                                                            className="text-xs text-center cursor-pointer leading-tight"
+                                                        >
+                                                            {getPermissionLabel(permission, section.label)}
+                                                        </label>
+                                                    </div>
+                                                </TooltipTrigger>
+                                                <TooltipContent side="top" className="max-w-[250px]">
+                                                    <div className="text-xs">
+                                                        <div className="font-medium">
+                                                            {i18n.t(permission.name)}
+                                                        </div>
+                                                        <div className="text-accent-foreground/70 mt-1">
+                                                            {i18n.t(permission.description)}
+                                                        </div>
+                                                    </div>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </TableCell>
+                                ))}
+                                {/* Fill remaining columns if less than 4 permissions */}
+                                {section.permissions.length < 4 &&
+                                    section.permissions.length > 1 &&
+                                    Array.from({ length: 4 - section.permissions.length }).map(
+                                        (_, fillIndex) => (
+                                            <TableCell key={`fill-${fillIndex}`} className="p-3" />
+                                        ),
+                                    )}
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+
+            {/* Mobile Card View */}
+            <div className="md:hidden space-y-4">
+                {groupedPermissions.map((section, index) => (
+                    <div key={index} className="border rounded-lg p-4 bg-card">
+                        <div className="mb-3">
+                            <div className="flex items-center gap-2 mb-2">
+                                <span className="font-semibold text-sm">{i18n.t(section.label)}</span>
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <InfoIcon className="h-3 w-3 text-muted-foreground" />
+                                        </TooltipTrigger>
+                                        <TooltipContent side="right" className="max-w-[250px]">
+                                            <p className="text-xs">{i18n.t(section.description)}</p>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                            </div>
+                            {section.permissions.length > 1 && !readonly && (
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => toggleAll(section.permissions)}
+                                    className="h-6 px-2 text-xs"
+                                >
+                                    <Trans>Toggle all</Trans>
+                                </Button>
+                            )}
+                        </div>
+                        <div className="grid grid-cols-2 gap-3">
+                            {sortPermissions(section.permissions).map(permission => (
+                                <div
+                                    key={permission.name}
+                                    className="flex items-center space-x-3 p-2 rounded border"
+                                >
+                                    <Switch
+                                        id={`mobile-${section.id}-${permission.name}`}
+                                        checked={value.includes(permission.name)}
+                                        onCheckedChange={checked => setPermission(permission.name, checked)}
+                                        disabled={readonly}
+                                    />
+                                    <div className="flex-1 min-w-0">
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <label
+                                                        htmlFor={`mobile-${section.id}-${permission.name}`}
+                                                        className="text-xs cursor-pointer block truncate"
+                                                    >
+                                                        {getPermissionLabel(permission, section.label)}
+                                                    </label>
+                                                </TooltipTrigger>
+                                                <TooltipContent side="top" className="max-w-[250px]">
+                                                    <div className="text-xs">
+                                                        <div className="font-medium">
+                                                            {i18n.t(permission.name)}
+                                                        </div>
+                                                        <div className="text-muted-foreground mt-1">
+                                                            {i18n.t(permission.description)}
+                                                        </div>
+                                                    </div>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// Sort permissions in CRUD order
+const sortPermissions = (permissions: ServerConfig['permissions']) => {
+    const crudOrder = ['Create', 'Read', 'Update', 'Delete'];
+
+    return [...permissions].sort((a, b) => {
+        // Find the CRUD prefix for each permission
+        const aPrefix = crudOrder.find(prefix => a.name.startsWith(prefix));
+        const bPrefix = crudOrder.find(prefix => b.name.startsWith(prefix));
+
+        // If both have CRUD prefixes, sort by CRUD order
+        if (aPrefix && bPrefix) {
+            return crudOrder.indexOf(aPrefix) - crudOrder.indexOf(bPrefix);
+        }
+
+        // If only one has CRUD prefix, put it first
+        if (aPrefix && !bPrefix) return -1;
+        if (!aPrefix && bPrefix) return 1;
+
+        // Otherwise, keep original order
+        return 0;
+    });
+};

package/src/app/routes/_authenticated/_roles/roles.tsx

@@ -12,7 +12,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { LayersIcon, PlusIcon } from 'lucide-react';
 import { ExpandablePermissions } from './components/expandable-permissions.js';
 import { DeleteRolesBulkAction } from './components/role-bulk-actions.js';
-import { deleteRoleDocument, roleListQuery } from './roles.graphql.js';
+import { roleListQuery } from './roles.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_roles/roles')({
     component: RoleListPage,
@@ -27,7 +27,6 @@ function RoleListPage() {
             pageId="role-list"
             title="Roles"
             listQuery={roleListQuery}
-            deleteMutation={deleteRoleDocument}
             route={Route}
             defaultVisibility={{
                 description: true,

package/src/app/routes/_authenticated/_roles/roles_.$id.tsx

@@ -19,7 +19,7 @@ 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 { PermissionsGrid } from './components/permissions-grid.js';
+import { PermissionsTableGrid } from './components/permissions-table-grid.js';
 import { createRoleDocument, roleDetailDocument, updateRoleDocument } from './roles.graphql.js';
 
 const pageId = 'role-detail';
@@ -61,7 +61,9 @@ function RoleDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created role' : 'Successfully updated role'));
+            toast.success(
+                i18n.t(creatingNewEntity ? 'Successfully created role' : 'Successfully updated role'),
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
@@ -132,7 +134,7 @@ function RoleDetailPage() {
                             name="permissions"
                             label={<Trans>Permissions</Trans>}
                             render={({ field }) => (
-                                <PermissionsGrid
+                                <PermissionsTableGrid
                                     value={field.value ?? []}
                                     onChange={value => field.onChange(value)}
                                 />

package/src/app/routes/_authenticated/_sellers/sellers.tsx

@@ -7,7 +7,7 @@ import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteSellersBulkAction } from './components/seller-bulk-actions.js';
-import { deleteSellerDocument, sellerListQuery } from './sellers.graphql.js';
+import { sellerListQuery } from './sellers.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_sellers/sellers')({
     component: SellerListPage,
@@ -19,7 +19,6 @@ function SellerListPage() {
         <ListPage
             pageId="seller-list"
             listQuery={sellerListQuery}
-            deleteMutation={deleteSellerDocument}
             route={Route}
             title="Sellers"
             defaultVisibility={{

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.tsx

@@ -12,7 +12,7 @@ import {
     RemoveShippingMethodsFromChannelBulkAction,
 } from './components/shipping-method-bulk-actions.js';
 import { TestShippingMethodDialog } from './components/test-shipping-method-dialog.js';
-import { deleteShippingMethodDocument, shippingMethodListQuery } from './shipping-methods.graphql.js';
+import { shippingMethodListQuery } from './shipping-methods.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_shipping-methods/shipping-methods')({
     component: ShippingMethodListPage,
@@ -24,7 +24,6 @@ function ShippingMethodListPage() {
         <ListPage
             pageId="shipping-method-list"
             listQuery={shippingMethodListQuery}
-            deleteMutation={deleteShippingMethodDocument}
             route={Route}
             title="Shipping Methods"
             defaultVisibility={{

package/src/app/routes/_authenticated/_stock-locations/stock-locations.tsx

@@ -11,7 +11,7 @@ import {
     DeleteStockLocationsBulkAction,
     RemoveStockLocationsFromChannelBulkAction,
 } from './components/stock-location-bulk-actions.js';
-import { deleteStockLocationDocument, stockLocationListQuery } from './stock-locations.graphql.js';
+import { stockLocationListQuery } from './stock-locations.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_stock-locations/stock-locations')({
     component: StockLocationListPage,
@@ -24,7 +24,6 @@ function StockLocationListPage() {
             pageId="stock-location-list"
             title="Stock Locations"
             listQuery={stockLocationListQuery}
-            deleteMutation={deleteStockLocationDocument}
             route={Route}
             customizeColumns={{
                 name: {

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

@@ -8,7 +8,7 @@ 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';
+import { taxCategoryListQuery } from './tax-categories.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories')({
     component: TaxCategoryListPage,
@@ -20,7 +20,6 @@ function TaxCategoryListPage() {
         <ListPage
             pageId="tax-category-list"
             listQuery={taxCategoryListQuery}
-            deleteMutation={deleteTaxCategoryDocument}
             route={Route}
             title="Tax Categories"
             defaultVisibility={{

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

@@ -11,7 +11,7 @@ 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';
+import { taxRateListQuery } from './tax-rates.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
     component: TaxRateListPage,
@@ -23,7 +23,6 @@ function TaxRateListPage() {
         <ListPage
             pageId="tax-rate-list"
             listQuery={taxRateListQuery}
-            deleteMutation={deleteTaxRateDocument}
             route={Route}
             title="Tax Rates"
             defaultVisibility={{