@vendure/dashboard 3.5.2-master-202512180239 → 3.5.2-master-202512190240

package/src/app/routes/_authenticated/_facets/components/facet-values-sheet.tsx

@@ -7,6 +7,7 @@ import {
     SheetTitle,
     SheetTrigger,
 } from '@/vdb/components/ui/sheet.js';
+import { FullWidthPageBlock } from '@/vdb/framework/layout-engine/page-layout.js';
 import { Trans } from '@lingui/react/macro';
 import { PanelLeftOpen } from 'lucide-react';
 import { FacetValuesTable } from './facet-values-table.js';
@@ -38,7 +39,9 @@ export function FacetValuesSheet({ facetName, facetId, children }: Readonly<Face
                     </SheetDescription>
                 </SheetHeader>
                 <div className="px-4">
-                    <FacetValuesTable facetId={facetId} />
+                    <FullWidthPageBlock blockId="facet-values-sheet-table">
+                        <FacetValuesTable facetId={facetId} />
+                    </FullWidthPageBlock>
                 </div>
             </SheetContent>
         </Sheet>

package/src/app/routes/_authenticated/_facets/components/facet-values-table.tsx

@@ -128,7 +128,7 @@ export function FacetValuesTable({ facetId, registerRefresher }: Readonly<FacetV
             />
             <div className="mt-4">
                 <Button asChild variant="outline">
-                    <Link to="./values/new">
+                    <Link to={`/facets/${facetId}/values/new`}>
                         <PlusIcon />
                         <Trans>Add facet value</Trans>
                     </Link>

package/src/app/routes/_authenticated/_facets/facets.tsx

@@ -1,4 +1,3 @@
-import { DataTableCellComponent } from '@/vdb/components/data-table/types.js';
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { FacetValueChip } from '@/vdb/components/shared/facet-value-chip.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
@@ -8,7 +7,6 @@ import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { ResultOf } from 'gql.tada';
 import { PlusIcon } from 'lucide-react';
 import {
     AssignFacetsToChannelBulkAction,
@@ -24,39 +22,6 @@ export const Route = createFileRoute('/_authenticated/_facets/facets')({
     loader: () => ({ breadcrumb: () => <Trans>Facets</Trans> }),
 });
 
-const FacetValuesCell: DataTableCellComponent<ResultOf<typeof facetListDocument>['facets']['items'][0]> = ({
-    row,
-}) => {
-    const value = row.original.valueList;
-    if (!value) {
-        return null;
-    }
-    const list = value;
-    return (
-        <div className="flex flex-wrap gap-2 items-center">
-            {list.items.map(item => {
-                return (
-                    <FacetValueChip
-                        key={item.id}
-                        facetValue={item}
-                        removable={false}
-                        displayFacetName={false}
-                    />
-                );
-            })}
-            <FacetValuesSheet facetId={row.original.id} facetName={row.original.name}>
-                {list.totalItems > 3 ? (
-                    <div>
-                        <Trans>+ {list.totalItems - 3} more</Trans>
-                    </div>
-                ) : (
-                    <Trans>View values</Trans>
-                )}
-            </FacetValuesSheet>
-        </div>
-    );
-};
-
 function FacetListPage() {
     return (
         <ListPage
@@ -66,11 +31,9 @@ function FacetListPage() {
             defaultVisibility={{
                 name: true,
                 isPrivate: true,
-                valueList: true,
             }}
             customizeColumns={{
                 name: {
-                    id: 'name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
                 isPrivate: {
@@ -86,7 +49,28 @@ function FacetListPage() {
                 },
                 valueList: {
                     header: () => <Trans>Values</Trans>,
-                    cell: FacetValuesCell,
+                    cell: ({ row }) => {
+                        const list = row.original.valueList;
+                        return (
+                            <div className="flex flex-wrap gap-2 items-center">
+                                {list?.items.map(item => (
+                                    <FacetValueChip
+                                        key={item.id}
+                                        facetValue={item}
+                                        removable={false}
+                                        displayFacetName={false}
+                                    />
+                                ))}
+                                <FacetValuesSheet facetId={row.original.id} facetName={row.original.name}>
+                                    {list && list.totalItems > 3 ? (
+                                        <Trans>+ {list.totalItems - 3} more</Trans>
+                                    ) : (
+                                        <Trans>View values</Trans>
+                                    )}
+                                </FacetValuesSheet>
+                            </div>
+                        );
+                    },
                 },
             }}
             onSearchTermChange={searchTerm => {

package/src/app/routes/_authenticated/_orders/components/order-table-totals.tsx

@@ -1,4 +1,6 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { TableCell, TableRow } from '@/vdb/components/ui/table.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { Trans } from '@lingui/react/macro';
 import { Order } from '../utils/order-types.js';
 import { MoneyGrossNet } from './money-gross-net.js';
@@ -9,6 +11,7 @@ export interface OrderTableTotalsProps {
 }
 
 export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
+    const { formatCurrency } = useLocalFormat();
     const currencyCode = order.currencyCode;
     return (
         <>
@@ -58,7 +61,19 @@ export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTota
             </TableRow>
             <TableRow>
                 <TableCell colSpan={columnCount - 1} className="h-12">
-                    <Trans>Shipping</Trans>
+                    <div className="flex flex-wrap gap-1">
+                        <div>
+                            <Trans>Shipping</Trans>
+                        </div>
+                        {order.shippingLines.map(sl => (
+                            <Badge variant="outline" key={sl.id}>
+                                {sl.shippingMethod.name}
+                                {order.shippingLines.length > 1
+                                    ? ` (${formatCurrency(sl.discountedPriceWithTax, order.currencyCode)})`
+                                    : ''}
+                            </Badge>
+                        ))}
+                    </div>
                 </TableCell>
                 <TableCell colSpan={1} className="h-12">
                     <MoneyGrossNet

package/src/app/routes/_authenticated/_product-variants/product-variants.graphql.ts

@@ -88,7 +88,6 @@ export const productVariantDetailDocument = graphql(
                 prices {
                     currencyCode
                     price
-                    customFields
                 }
                 trackInventory
                 outOfStockThreshold

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

@@ -54,7 +54,7 @@ export const Route = createFileRoute('/_authenticated/_product-variants/product-
         breadcrumb(_isNew, entity, location) {
             if ((location.search as any).from === 'product') {
                 return [
-                    { path: '/product', label: <Trans>Products</Trans> },
+                    { path: '/products', label: <Trans>Products</Trans> },
                     { path: `/products/${entity?.product.id}`, label: entity?.product.name ?? '' },
                     entity?.name,
                 ];
@@ -97,7 +97,7 @@ function ProductVariantDetailPage() {
                 prices: entity.prices,
                 trackInventory: entity.trackInventory,
                 outOfStockThreshold: entity.outOfStockThreshold,
-                useGlobalOutOfStockThreshold : entity.useGlobalOutOfStockThreshold,
+                useGlobalOutOfStockThreshold: entity.useGlobalOutOfStockThreshold,
                 stockLevels: entity.stockLevels.map(stockLevel => ({
                     stockOnHand: stockLevel.stockOnHand,
                     stockLocationId: stockLevel.stockLocation.id,

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

@@ -38,6 +38,11 @@ export const productDetailFragment = graphql(
             assets {
                 ...Asset
             }
+            channels {
+                id
+                code
+                token
+            }
             translations {
                 id
                 languageCode

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -31,7 +31,16 @@ import { toast } from 'sonner';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
 import { ProductOptionGroupBadge } from './components/product-option-group-badge.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
-import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
+import {
+    assignProductsToChannelDocument,
+    createProductDocument,
+    productDetailDocument,
+    removeProductsFromChannelDocument,
+    updateProductDocument,
+} from './products.graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { AssignedChannels } from '@/vdb/components/shared/assigned-channels.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
 
 const pageId = 'product-detail';
 
@@ -56,6 +65,7 @@ function ProductDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { t } = useLingui();
     const refreshRef = useRef<() => void>(() => {});
+    const { channels } = useChannel();
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
         pageId,
@@ -70,6 +80,7 @@ function ProductDetailPage() {
                 featuredAssetId: entity.featuredAsset?.id,
                 assetIds: entity.assets.map(asset => asset.id),
                 facetValueIds: entity.facetValues.map(facetValue => facetValue.id),
+                channelIds: entity.channels.map(c => c.id) ?? [],
                 translations: entity.translations.map(translation => ({
                     id: translation.id,
                     languageCode: translation.languageCode,
@@ -205,6 +216,18 @@ function ProductDetailPage() {
                         )}
                     />
                 </PageBlock>
+                {channels.length > 1 && entity && (
+                    <PageBlock column="side" blockId="channels" title={<Trans>Channels</Trans>}>
+                        <AssignedChannels
+                            channels={entity.channels}
+                            entityId={entity.id}
+                            canUpdate={!creatingNewEntity}
+                            assignMutationFn={api.mutate(assignProductsToChannelDocument)}
+                            removeMutationFn={api.mutate(removeProductsFromChannelDocument)}
+                        />
+                    </PageBlock>
+                )}
+
                 <PageBlock column="side" blockId="assets" title={<Trans>Assets</Trans>}>
                     <FormItem>
                         <FormControl>

package/src/app/routes/_authenticated/_system/components/payload-dialog.tsx

@@ -14,11 +14,18 @@ type PayloadDialogProps = {
     trigger: React.ReactNode;
     title?: string | React.ReactNode;
     description?: string | React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
 };
 
-export function PayloadDialog({ payload, trigger, title, description }: Readonly<PayloadDialogProps>) {
+export function PayloadDialog({
+    payload,
+    trigger,
+    title,
+    description,
+    onOpenChange,
+}: Readonly<PayloadDialogProps>) {
     return (
-        <Dialog>
+        <Dialog onOpenChange={open => onOpenChange?.(open)}>
             <DialogTrigger asChild>{trigger}</DialogTrigger>
             <DialogContent>
                 <DialogHeader>

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -78,12 +78,17 @@ function JobQueuePage() {
     const refreshRef = useRef<() => void>(() => {});
     const { t } = useLingui();
     const [refreshInterval, setRefreshInterval] = useState(10000);
+    const isActionMenuOpenRef = useRef(false);
 
     useEffect(() => {
         if (refreshInterval === 0) return;
 
         const interval = setInterval(() => {
-            refreshRef.current();
+            // Pause auto-refresh while the row action dropdown is open
+            // to avoid closing it mid-interaction
+            if (!isActionMenuOpenRef.current) {
+                refreshRef.current();
+            }
         }, refreshInterval);
 
         return () => clearInterval(interval);
@@ -111,6 +116,7 @@ function JobQueuePage() {
                         <PayloadDialog
                             payload={row.original.data}
                             title={<Trans>View job data</Trans>}
+                            onOpenChange={open => (isActionMenuOpenRef.current = open)}
                             description={<Trans>The data that has been passed to the job</Trans>}
                             trigger={
                                 <Button size="sm" variant="secondary">
@@ -129,6 +135,7 @@ function JobQueuePage() {
                             <PayloadDialog
                                 payload={row.original.result}
                                 title={<Trans>View job result</Trans>}
+                                onOpenChange={open => (isActionMenuOpenRef.current = open)}
                                 description={<Trans>The result of the job</Trans>}
                                 trigger={
                                     <Button size="sm" variant="secondary">
@@ -168,7 +175,9 @@ function JobQueuePage() {
                                 {row.original.state}
                                 {row.original.state === 'RUNNING' ? (
                                     <div className="flex items-center gap-2">
-                                        <DropdownMenu>
+                                        <DropdownMenu
+                                            onOpenChange={open => (isActionMenuOpenRef.current = open)}
+                                        >
                                             <DropdownMenuTrigger asChild>
                                                 <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
                                                     <MoreVertical className="h-4 w-4" />

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

@@ -25,6 +25,7 @@ function ZoneListPage() {
             title={<Trans>Zones</Trans>}
             defaultVisibility={{
                 name: true,
+                regions: true,
             }}
             customizeColumns={{
                 name: {