@vendure/dashboard 3.5.0-minor-202510031341 → 3.5.0-minor-202510161257

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

@@ -1,4 +1,5 @@
 import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { NumberInput } from '@/vdb/components/data-input/number-input.js';
 import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
@@ -24,15 +25,21 @@ import {
 } 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 { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { Fragment } from 'react/jsx-runtime';
+import { VariablesOf } from 'gql.tada';
+import { Trash } from 'lucide-react';
 import { toast } from 'sonner';
+import { AddCurrencyDropdown } from './components/add-currency-dropdown.js';
+import { AddStockLocationDropdown } from './components/add-stock-location-dropdown.js';
 import { VariantPriceDetail } from './components/variant-price-detail.js';
 import {
     createProductVariantDocument,
     productVariantDetailDocument,
+    stockLocationsQueryDocument,
     updateProductVariantDocument,
 } from './product-variants.graphql.js';
 
@@ -57,6 +64,8 @@ export const Route = createFileRoute('/_authenticated/_product-variants/product-
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
 });
 
+type PriceInput = NonNullable<VariablesOf<typeof updateProductVariantDocument>['input']['prices']>[number];
+
 function ProductVariantDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
@@ -64,6 +73,11 @@ function ProductVariantDetailPage() {
     const { t } = useLingui();
     const { activeChannel } = useChannel();
 
+    const { data: stockLocationsData } = useQuery({
+        queryKey: ['stockLocations'],
+        queryFn: () => api.query(stockLocationsQueryDocument, {}),
+    });
+
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
         queryDocument: productVariantDetailDocument,
@@ -79,7 +93,7 @@ function ProductVariantDetailPage() {
                 facetValueIds: entity.facetValues.map(facetValue => facetValue.id),
                 taxCategoryId: entity.taxCategory.id,
                 price: entity.price,
-                prices: [],
+                prices: entity.prices,
                 trackInventory: entity.trackInventory,
                 outOfStockThreshold: entity.outOfStockThreshold,
                 stockLevels: entity.stockLevels.map(stockLevel => ({
@@ -117,7 +131,74 @@ function ProductVariantDetailPage() {
         },
     });
 
-    const [price, taxCategoryId] = form.watch(['price', 'taxCategoryId']);
+    const availableCurrencies = activeChannel?.availableCurrencyCodes ?? [];
+    const [prices, taxCategoryId, stockLevels] = form.watch(['prices', 'taxCategoryId', 'stockLevels']);
+
+    // Filter out deleted prices for display
+    const activePrices = prices?.filter(p => !p.delete) ?? [];
+
+    // Get currencies that are currently active (not deleted)
+    const usedCurrencies = activePrices.map(p => p.currencyCode);
+    const unusedCurrencies = availableCurrencies.filter(c => !usedCurrencies.includes(c));
+
+    // Get used stock location IDs
+    const usedStockLocationIds = stockLevels?.map(sl => sl.stockLocationId) ?? [];
+
+    const handleAddCurrency = (currencyCode: string) => {
+        const currentPrices = form.getValues('prices') || [];
+
+        // Check if this currency already exists (including deleted ones)
+        const existingPriceIndex = currentPrices.findIndex(p => p.currencyCode === currencyCode);
+
+        if (existingPriceIndex !== -1) {
+            // Currency exists, mark it as not deleted
+            const updatedPrices = [...currentPrices];
+            updatedPrices[existingPriceIndex] = {
+                ...updatedPrices[existingPriceIndex],
+                delete: false,
+            };
+            form.setValue('prices', updatedPrices, {
+                shouldDirty: true,
+                shouldValidate: true,
+            });
+        } else {
+            // Add new currency
+            const newPrice = {
+                currencyCode,
+                price: 0,
+                delete: false,
+            } as PriceInput;
+            form.setValue('prices', [...currentPrices, newPrice], {
+                shouldDirty: true,
+                shouldValidate: true,
+            });
+        }
+    };
+
+    const handleRemoveCurrency = (indexToRemove: number) => {
+        const currentPrices = form.getValues('prices') || [];
+        const updatedPrices = [...currentPrices];
+        updatedPrices[indexToRemove] = {
+            ...updatedPrices[indexToRemove],
+            delete: true,
+        };
+        form.setValue('prices', updatedPrices, {
+            shouldDirty: true,
+            shouldValidate: true,
+        });
+    };
+
+    const handleAddStockLocation = (stockLocationId: string, stockLocationName: string) => {
+        const currentStockLevels = form.getValues('stockLevels') || [];
+        const newStockLevel = {
+            stockLocationId,
+            stockOnHand: 0,
+        };
+        form.setValue('stockLevels', [...currentStockLevels, newStockLevel], {
+            shouldDirty: true,
+            shouldValidate: true,
+        });
+    };
 
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
@@ -168,7 +249,7 @@ function ProductVariantDetailPage() {
                 <CustomFieldsPageBlock column="main" entityType="ProductVariant" control={form.control} />
 
                 <PageBlock column="main" blockId="price-and-tax" title={<Trans>Price and tax</Trans>}>
-                    <div className="grid grid-cols-2 gap-4 items-start">
+                    <DetailFormGrid>
                         <FormFieldWrapper
                             control={form.control}
                             name="taxCategoryId"
@@ -177,56 +258,62 @@ function ProductVariantDetailPage() {
                                 <TaxCategorySelector value={field.value} onChange={field.onChange} />
                             )}
                         />
+                    </DetailFormGrid>
+                    {activePrices.map((price, displayIndex) => {
+                        // Find the actual index in the full prices array
+                        const actualIndex = prices?.findIndex(p => p === price) ?? displayIndex;
 
-                        <div>
-                            <FormFieldWrapper
-                                control={form.control}
-                                name="price"
-                                label={<Trans>Price</Trans>}
-                                render={({ field }) => (
-                                    <MoneyInput {...field} currency={entity?.currencyCode} />
-                                )}
-                            />
-                            <VariantPriceDetail
-                                priceIncludesTax={activeChannel?.pricesIncludeTax ?? false}
-                                price={price}
-                                currencyCode={
-                                    entity?.currencyCode ?? activeChannel?.defaultCurrencyCode ?? ''
-                                }
-                                taxCategoryId={taxCategoryId}
-                            />
-                        </div>
-                    </div>
+                        const currencyCodeLabel = (
+                            <div className="uppercase text-muted-foreground">{price.currencyCode}</div>
+                        );
+                        const priceLabel = (
+                            <div className="flex gap-1 items-center justify-between">
+                                <Trans>Price</Trans> {activePrices.length > 1 ? currencyCodeLabel : null}
+                            </div>
+                        );
+                        return (
+                            <DetailFormGrid key={price.currencyCode}>
+                                <div className="flex gap-1 items-end">
+                                    <FormFieldWrapper
+                                        control={form.control}
+                                        name={`prices.${actualIndex}.price`}
+                                        label={priceLabel}
+                                        render={({ field }) => (
+                                            <MoneyInput {...field} currency={price.currencyCode} />
+                                        )}
+                                    />
+                                    {activePrices.length > 1 && (
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={() => handleRemoveCurrency(actualIndex)}
+                                            className="h-6 w-6 p-0 mb-2 hover:text-destructive hover:bg-destructive-100"
+                                        >
+                                            <Trash className="size-4" />
+                                        </Button>
+                                    )}
+                                </div>
+                                <VariantPriceDetail
+                                    priceIncludesTax={activeChannel?.pricesIncludeTax ?? false}
+                                    price={price.price}
+                                    currencyCode={
+                                        price.currencyCode ?? activeChannel?.defaultCurrencyCode ?? ''
+                                    }
+                                    taxCategoryId={taxCategoryId}
+                                />
+                            </DetailFormGrid>
+                        );
+                    })}
+                    {unusedCurrencies.length ? (
+                        <AddCurrencyDropdown
+                            onCurrencySelect={handleAddCurrency}
+                            unusedCurrencies={unusedCurrencies}
+                        />
+                    ) : null}
                 </PageBlock>
                 <PageBlock column="main" blockId="stock" title={<Trans>Stock</Trans>}>
                     <DetailFormGrid>
-                        {entity?.stockLevels.map((stockLevel, index) => (
-                            <Fragment key={stockLevel.id}>
-                                <FormFieldWrapper
-                                    control={form.control}
-                                    name={`stockLevels.${index}.stockOnHand`}
-                                    label={<Trans>Stock level</Trans>}
-                                    render={({ field }) => (
-                                        <Input
-                                            type="number"
-                                            value={field.value}
-                                            onChange={e => {
-                                                field.onChange(e.target.valueAsNumber);
-                                            }}
-                                        />
-                                    )}
-                                />
-                                <div>
-                                    <FormItem>
-                                        <FormLabel>
-                                            <Trans>Allocated</Trans>
-                                        </FormLabel>
-                                        <div className="text-sm pt-1.5">{stockLevel.stockAllocated}</div>
-                                    </FormItem>
-                                </div>
-                            </Fragment>
-                        ))}
-
                         <FormFieldWrapper
                             control={form.control}
                             name="trackInventory"
@@ -292,6 +379,47 @@ function ProductVariantDetailPage() {
                             )}
                         />
                     </DetailFormGrid>
+                    {stockLevels?.map((stockLevel, index) => {
+                        const stockAllocated =
+                            entity?.stockLevels.find(sl => sl.stockLocation.id === stockLevel.stockLocationId)
+                                ?.stockAllocated ?? 0;
+                        const stockLocationName = stockLocationsData?.stockLocations.items?.find(
+                            sl => sl.id === stockLevel.stockLocationId,
+                        )?.name;
+                        const stockLocationNameLabel =
+                            stockLevels.length > 1 ? (
+                                <div className="text-muted-foreground">{stockLocationName}</div>
+                            ) : null;
+                        const stockLabel = (
+                            <>
+                                <Trans>Stock level</Trans>
+                                {stockLocationNameLabel}
+                            </>
+                        );
+                        return (
+                            <DetailFormGrid key={stockLevel.stockLocationId}>
+                                <FormFieldWrapper
+                                    control={form.control}
+                                    name={`stockLevels.${index}.stockOnHand`}
+                                    label={stockLabel}
+                                    render={({ field }) => <NumberInput {...field} value={field.value} />}
+                                />
+                                <div>
+                                    <FormItem>
+                                        <FormLabel>
+                                            <Trans>Allocated</Trans>
+                                        </FormLabel>
+                                        <div className="text-sm pt-1.5">{stockAllocated}</div>
+                                    </FormItem>
+                                </div>
+                            </DetailFormGrid>
+                        );
+                    })}
+                    <AddStockLocationDropdown
+                        availableStockLocations={stockLocationsData?.stockLocations.items ?? []}
+                        usedStockLocationIds={usedStockLocationIds}
+                        onStockLocationSelect={handleAddStockLocation}
+                    />
                 </PageBlock>
 
                 <PageBlock column="side" blockId="facet-values">

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

@@ -108,12 +108,6 @@ export const DuplicateProductsBulkAction: BulkActionComponent<any> = ({ selectio
         <DuplicateBulkAction
             entityType="Product"
             duplicatorCode="product-duplicator"
-            duplicatorArguments={[
-                {
-                    name: 'includeVariants',
-                    value: 'true',
-                },
-            ]}
             requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
             entityName="Product"
             selection={selection}

package/src/app/routes/_authenticated/_products/components/product-variants-table.tsx

@@ -5,7 +5,6 @@ import {
     PaginatedListRefresherRegisterFn,
 } from '@/vdb/components/shared/paginated-list-data-table.js';
 import { StockLevelLabel } from '@/vdb/components/shared/stock-level-label.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
@@ -17,15 +16,6 @@ import {
 } from '../../_product-variants/components/product-variant-bulk-actions.js';
 import { productVariantListDocument } from '../products.graphql.js';
 
-export const deleteProductVariantDocument = graphql(`
-    mutation DeleteProductVariant($id: ID!) {
-        deleteProductVariant(id: $id) {
-            result
-            message
-        }
-    }
-`);
-
 interface ProductVariantsTableProps {
     productId: string;
     registerRefresher?: PaginatedListRefresherRegisterFn;
@@ -47,7 +37,6 @@ export function ProductVariantsTable({
         <PaginatedListDataTable
             registerRefresher={registerRefresher}
             listQuery={productVariantListDocument}
-            deleteMutation={deleteProductVariantDocument}
             transformVariables={variables => ({
                 ...variables,
                 productId,

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

@@ -1,5 +1,6 @@
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.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';
@@ -7,7 +8,7 @@ import { api } from '@/vdb/graphql/api.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { PlusIcon, RefreshCwIcon } from 'lucide-react';
+import { ListRestart, PlusIcon } from 'lucide-react';
 import { toast } from 'sonner';
 import {
     AssignFacetValuesToProductsBulkAction,
@@ -48,6 +49,9 @@ function ProductListPage() {
                 name: {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
             }}
             onSearchTermChange={searchTerm => {
                 return {
@@ -87,7 +91,7 @@ function ProductListPage() {
             <PageActionBarRight>
                 <PermissionGuard requires={['UpdateCatalog']}>
                     <Button variant="outline" onClick={handleRebuildSearchIndex}>
-                        <RefreshCwIcon />
+                        <ListRestart />
                         <Trans>Rebuild search index</Trans>
                     </Button>
                 </PermissionGuard>

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$productOptionGroupId.options_.$id.tsx

@@ -124,11 +124,9 @@ function ProductOptionDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             toast(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Successfully created product option'
-                        : 'Successfully updated product option',
-                ),
+                creatingNewEntity
+                    ? t`Successfully created product option`
+                    : t`Successfully updated product option`,
             );
             resetForm();
             const created = Array.isArray(data) ? data[0] : data;
@@ -138,9 +136,7 @@ function ProductOptionDetailPage() {
         },
         onError: err => {
             toast(
-                i18n.t(
-                    creatingNewEntity ? 'Failed to create product option' : 'Failed to update product option',
-                ),
+                creatingNewEntity ? t`Failed to create product option` : t`Failed to update product option`,
                 {
                     description: err instanceof Error ? err.message : 'Unknown error',
                 },

package/src/app/routes/_authenticated/_promotions/components/promotion-bulk-actions.tsx

@@ -63,16 +63,6 @@ export const DuplicatePromotionsBulkAction: BulkActionComponent<any> = ({ select
         <DuplicateBulkAction
             entityType="Promotion"
             duplicatorCode="promotion-duplicator"
-            duplicatorArguments={[
-                {
-                    name: 'includeConditions',
-                    value: 'true',
-                },
-                {
-                    name: 'includeActions',
-                    value: 'true',
-                },
-            ]}
             requiredPermissions={['CreatePromotion']}
             entityName="Promotion"
             selection={selection}

package/src/app/routes/_authenticated/_promotions/promotions.graphql.ts

@@ -2,8 +2,8 @@ import { configurableOperationFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const promotionListDocument = graphql(`
-    query PromotionList {
-        promotions {
+    query PromotionList($options: PromotionListOptions) {
+        promotions(options: $options) {
             items {
                 id
                 createdAt

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

@@ -1,6 +1,7 @@
 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 { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.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';
@@ -40,6 +41,14 @@ function PromotionListPage() {
                     couponCode: { contains: searchTerm },
                 };
             }}
+            transformVariables={variables => {
+                return {
+                    options: {
+                        ...variables.options,
+                        filterOperator: 'OR' as const,
+                    },
+                };
+            }}
             customizeColumns={{
                 name: {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
@@ -47,6 +56,9 @@ function PromotionListPage() {
                 enabled: {
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
             }}
             bulkActions={[
                 {

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -1,4 +1,5 @@
 import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
+import { NumberInput } from '@/vdb/components/data-input/number-input.js';
 import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
@@ -203,11 +204,7 @@ function PromotionDetailPage() {
                             name="perCustomerUsageLimit"
                             label={<Trans>Per customer usage limit</Trans>}
                             render={({ field }) => (
-                                <Input
-                                    type="number"
-                                    value={field.value ?? ''}
-                                    onChange={e => field.onChange(e.target.valueAsNumber)}
-                                />
+                                <NumberInput {...field} value={field.value ?? ''} min={0} max={1000} />
                             )}
                         />
                         <FormFieldWrapper
@@ -215,11 +212,7 @@ function PromotionDetailPage() {
                             name="usageLimit"
                             label={<Trans>Usage limit</Trans>}
                             render={({ field }) => (
-                                <Input
-                                    type="number"
-                                    value={field.value ?? ''}
-                                    onChange={e => field.onChange(e.target.valueAsNumber)}
-                                />
+                                <NumberInput {...field} value={field.value ?? ''} min={0} max={1000} />
                             )}
                         />
                     </DetailFormGrid>

package/src/app/routes/_authenticated/_sellers/sellers.graphql.ts

@@ -11,8 +11,8 @@ export const sellerItemFragment = graphql(`
 
 export const sellerListQuery = graphql(
     `
-        query SellerList {
-            sellers {
+        query SellerList($options: SellerListOptions) {
+            sellers(options: $options) {
                 items {
                     ...SellerItem
                 }

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.graphql.ts

@@ -15,8 +15,8 @@ export const shippingMethodItemFragment = graphql(`
 
 export const shippingMethodListQuery = graphql(
     `
-        query ShippingMethodList {
-            shippingMethods {
+        query ShippingMethodList($options: ShippingMethodListOptions) {
+            shippingMethods(options: $options) {
                 items {
                     ...ShippingMethodItem
                 }

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

@@ -1,5 +1,6 @@
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.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';
@@ -35,6 +36,9 @@ function ShippingMethodListPage() {
                 name: {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
             }}
             onSearchTermChange={searchTerm => {
                 return {

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

@@ -86,11 +86,9 @@ function ShippingMethodDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             toast.success(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Successfully created shipping method'
-                        : 'Successfully updated shipping method',
-                ),
+                creatingNewEntity
+                    ? t`Successfully created shipping method`
+                    : t`Successfully updated shipping method`,
             );
             resetForm();
             if (creatingNewEntity) {
@@ -99,11 +97,7 @@ function ShippingMethodDetailPage() {
         },
         onError: err => {
             toast.error(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Failed to create shipping method'
-                        : 'Failed to update shipping method',
-                ),
+                creatingNewEntity ? t`Failed to create shipping method` : t`Failed to update shipping method`,
                 {
                     description: err instanceof Error ? err.message : 'Unknown error',
                 },

package/src/app/routes/_authenticated/_stock-locations/stock-locations.graphql.ts

@@ -12,8 +12,8 @@ export const stockLocationFragment = graphql(`
 
 export const stockLocationListQuery = graphql(
     `
-        query StockLocationList {
-            stockLocations {
+        query StockLocationList($options: StockLocationListOptions) {
+            stockLocations(options: $options) {
                 items {
                     ...StockLocationItem
                 }

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

@@ -12,8 +12,8 @@ export const taxCategoryItemFragment = graphql(`
 
 export const taxCategoryListQuery = graphql(
     `
-        query TaxCategoryList {
-            taxCategories {
+        query TaxCategoryList($options: TaxCategoryListOptions) {
+            taxCategories(options: $options) {
                 items {
                     ...TaxCategoryItem
                 }

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

@@ -8,6 +8,7 @@ import { api } from '@/vdb/graphql/api.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { mapFacetedFilterFields } from '../../../common/map-faceted-filter-fields.js';
 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';
@@ -42,6 +43,14 @@ function TaxRateListPage() {
                     name: { contains: searchTerm },
                 };
             }}
+            transformVariables={input => {
+                const facetedFilters = input.options?.filter?._and ?? [];
+                mapFacetedFilterFields(facetedFilters, {
+                    category: 'categoryId',
+                    zone: 'zoneId',
+                });
+                return input;
+            }}
             facetedFilters={{
                 enabled: {
                     title: t`Enabled`,

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

@@ -125,6 +125,7 @@ function TaxRateDetailPage() {
                                     {...field}
                                     type="number"
                                     suffix="%"
+                                    min={0}
                                     value={field.value}
                                     onChange={e => field.onChange(e.target.valueAsNumber)}
                                 />

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

@@ -11,8 +11,8 @@ export const zoneItemFragment = graphql(`
 
 export const zoneListQuery = graphql(
     `
-        query ZoneList {
-            zones {
+        query ZoneList($options: ZoneListOptions) {
+            zones(options: $options) {
                 items {
                     ...ZoneItem
                 }

package/src/app/routes/login.tsx

@@ -36,8 +36,8 @@ function LoginPage() {
     const isVerifying = isLoading || auth.status === 'verifying';
 
     return (
-        <div className="flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
-            <div className="w-full max-w-sm md:max-w-4xl">
+        <div className="flex min-h-svh flex-col items-center justify-center p-6 md:p-10 bg-sidebar">
+            <div className="w-full max-w-sm md:max-w-md">
                 <LoginForm
                     onFormSubmit={onFormSubmit}
                     isVerifying={isVerifying}