@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -1,20 +1,28 @@
-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 { useQueries } from '@tanstack/react-query';
+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 { FetchQueryOptions, useQueries } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ExpandedState, getExpandedRowModel } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 import { ResultOf } from 'gql.tada';
-import { Folder, FolderOpen, PlusIcon } from 'lucide-react';
+import { Folder, FolderOpen, FolderTreeIcon, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
+import {
+    AssignCollectionsToChannelBulkAction,
+    DeleteCollectionsBulkAction,
+    DuplicateCollectionsBulkAction,
+    MoveCollectionsBulkAction,
+    RemoveCollectionsFromChannelBulkAction,
+} from './components/collection-bulk-actions.js';
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
+import { useMoveSingleCollection } from './components/move-single-collection.js';
 
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
     component: CollectionListPage,
@@ -25,6 +33,7 @@ type Collection = ResultOf<typeof collectionListDocument>['collections']['items'
 
 function CollectionListPage() {
     const [expanded, setExpanded] = useState<ExpandedState>({});
+    const { handleMoveClick, MoveDialog } = useMoveSingleCollection();
     const childrenQueries = useQueries({
         queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
             return {
@@ -38,7 +47,7 @@ function CollectionListPage() {
                         },
                     }),
                 staleTime: 1000 * 60 * 5,
-            };
+            } satisfies FetchQueryOptions;
         }),
     });
     const childCollectionsByParentId = childrenQueries.reduce(
@@ -71,125 +80,160 @@ function CollectionListPage() {
     };
 
     return (
-        <ListPage
-            pageId="collection-list"
-            title="Collections"
-            listQuery={collectionListDocument}
-            transformVariables={input => {
-                const filterTerm = input.options?.filter?.name?.contains;
-                const isFiltering = !!filterTerm;
-                return {
-                    options: {
-                        ...input.options,
-                        topLevelOnly: !isFiltering,
+        <>
+            <ListPage
+                pageId="collection-list"
+                title="Collections"
+                listQuery={collectionListDocument}
+                transformVariables={input => {
+                    const filterTerm = input.options?.filter?.name?.contains;
+                    const isFiltering = !!filterTerm;
+                    return {
+                        options: {
+                            ...input.options,
+                            topLevelOnly: !isFiltering,
+                        },
+                    };
+                }}
+                deleteMutation={deleteCollectionDocument}
+                customizeColumns={{
+                    name: {
+                        header: 'Collection Name',
+                        cell: ({ row }) => {
+                            const isExpanded = row.getIsExpanded();
+                            const hasChildren = !!row.original.children?.length;
+                            return (
+                                <div
+                                    style={{ marginLeft: (row.original.breadcrumbs.length - 2) * 20 + 'px' }}
+                                    className="flex gap-2 items-center"
+                                >
+                                    <Button
+                                        size="icon"
+                                        variant="secondary"
+                                        onClick={row.getToggleExpandedHandler()}
+                                        disabled={!hasChildren}
+                                        className={!hasChildren ? 'opacity-20' : ''}
+                                    >
+                                        {isExpanded ? <FolderOpen /> : <Folder />}
+                                    </Button>
+                                    <DetailPageButton id={row.original.id} label={row.original.name} />
+                                </div>
+                            );
+                        },
+                    },
+                    breadcrumbs: {
+                        cell: ({ cell }) => {
+                            const value = cell.getValue();
+                            if (!Array.isArray(value)) {
+                                return null;
+                            }
+                            return (
+                                <div>
+                                    {value
+                                        .slice(1)
+                                        .map(breadcrumb => breadcrumb.name)
+                                        .join(' / ')}
+                                </div>
+                            );
+                        },
                     },
-                };
-            }}
-            deleteMutation={deleteCollectionDocument}
-            customizeColumns={{
-                name: {
-                    header: 'Collection Name',
-                    cell: ({ row }) => {
-                        const isExpanded = row.getIsExpanded();
-                        const hasChildren = !!row.original.children?.length;
-                        return (
-                            <div
-                                style={{ marginLeft: (row.original.breadcrumbs.length - 2) * 20 + 'px' }}
-                                className="flex gap-2 items-center"
-                            >
-                                <Button
-                                    size="icon"
-                                    variant="secondary"
-                                    onClick={row.getToggleExpandedHandler()}
-                                    disabled={!hasChildren}
-                                    className={!hasChildren ? 'opacity-20' : ''}
+                    productVariants: {
+                        header: 'Contents',
+                        cell: ({ row }) => {
+                            return (
+                                <CollectionContentsSheet
+                                    collectionId={row.original.id}
+                                    collectionName={row.original.name}
                                 >
-                                    {isExpanded ? <FolderOpen /> : <Folder />}
-                                </Button>
-                                <DetailPageButton id={row.original.id} label={row.original.name} />
-                            </div>
-                        );
+                                    <Trans>{row.original.productVariants.totalItems} variants</Trans>
+                                </CollectionContentsSheet>
+                            );
+                        },
                     },
-                },
-                breadcrumbs: {
-                    cell: ({ cell }) => {
-                        const value = cell.getValue();
-                        if (!Array.isArray(value)) {
-                            return null;
-                        }
-                        return (
-                            <div>
-                                {value
-                                    .slice(1)
-                                    .map(breadcrumb => breadcrumb.name)
-                                    .join(' / ')}
+                }}
+                defaultColumnOrder={[
+                    'featuredAsset',
+                    'children',
+                    'name',
+                    'slug',
+                    'breadcrumbs',
+                    'productVariants',
+                ]}
+                transformData={data => {
+                    return addSubCollections(data);
+                }}
+                setTableOptions={(options: TableOptions<any>) => {
+                    options.state = {
+                        ...options.state,
+                        expanded: expanded,
+                    };
+                    options.onExpandedChange = setExpanded;
+                    options.getExpandedRowModel = getExpandedRowModel();
+                    options.getRowCanExpand = () => true;
+                    options.getRowId = row => {
+                        return row.id;
+                    };
+                    return options;
+                }}
+                defaultVisibility={{
+                    id: false,
+                    createdAt: false,
+                    updatedAt: false,
+                    position: false,
+                    parentId: false,
+                    children: false,
+                }}
+                onSearchTermChange={searchTerm => {
+                    return {
+                        name: { contains: searchTerm },
+                    };
+                }}
+                route={Route}
+                rowActions={[
+                    {
+                        label: (
+                            <div className="flex items-center gap-2">
+                                <FolderTreeIcon className="w-4 h-4" /> <Trans>Move</Trans>
                             </div>
-                        );
+                        ),
+                        onClick: row => handleMoveClick(row.original),
+                    },
+                ]}
+                bulkActions={[
+                    {
+                        component: AssignCollectionsToChannelBulkAction,
+                        order: 100,
+                    },
+                    {
+                        component: RemoveCollectionsFromChannelBulkAction,
+                        order: 200,
+                    },
+                    {
+                        component: DuplicateCollectionsBulkAction,
+                        order: 300,
+                    },
+                    {
+                        component: MoveCollectionsBulkAction,
+                        order: 400,
                     },
-                },
-                productVariants: {
-                    header: 'Contents',
-                    cell: ({ row }) => {
-                        return (
-                            <CollectionContentsSheet
-                                collectionId={row.original.id}
-                                collectionName={row.original.name}
-                            >
-                                <Trans>{row.original.productVariants.totalItems} variants</Trans>
-                            </CollectionContentsSheet>
-                        );
+                    {
+                        component: DeleteCollectionsBulkAction,
+                        order: 500,
                     },
-                },
-            }}
-            defaultColumnOrder={[
-                'featuredAsset',
-                'children',
-                'name',
-                'slug',
-                'breadcrumbs',
-                'productVariants',
-            ]}
-            transformData={data => {
-                return addSubCollections(data);
-            }}
-            setTableOptions={(options: TableOptions<any>) => {
-                options.state = {
-                    ...options.state,
-                    expanded: expanded,
-                };
-                options.onExpandedChange = setExpanded;
-                options.getExpandedRowModel = getExpandedRowModel();
-                options.getRowCanExpand = () => true;
-                options.getRowId = row => {
-                    return row.id;
-                };
-                return options;
-            }}
-            defaultVisibility={{
-                id: false,
-                createdAt: false,
-                updatedAt: false,
-                position: false,
-                parentId: false,
-                children: false,
-            }}
-            onSearchTermChange={searchTerm => {
-                return {
-                    name: { contains: searchTerm },
-                };
-            }}
-            route={Route}
-        >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreateCollection', 'CreateCatalog']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon className="mr-2 h-4 w-4" />
-                            <Trans>New Collection</Trans>
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
-        </ListPage>
+                ]}
+            >
+                <PageActionBarRight>
+                    <PermissionGuard requires={['CreateCollection', 'CreateCatalog']}>
+                        <Button asChild>
+                            <Link to="./new">
+                                <PlusIcon className="mr-2 h-4 w-4" />
+                                <Trans>New Collection</Trans>
+                            </Link>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </ListPage>
+            <MoveDialog />
+        </>
     );
 }

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -1,14 +1,14 @@
-import { RichTextInput } from '@/components/data-input/richt-text-input.js';
-import { EntityAssets } from '@/components/shared/entity-assets.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 { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
-import { Button } from '@/components/ui/button.js';
-import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
+import { EntityAssets } from '@/vdb/components/shared/entity-assets.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 { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.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,
@@ -18,10 +18,10 @@ 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 {
@@ -33,9 +33,12 @@ import { CollectionContentsPreviewTable } from './components/collection-contents
 import { CollectionContentsTable } from './components/collection-contents-table.js';
 import { CollectionFiltersSelector } from './components/collection-filters-selector.js';
 
+const pageId = 'collection-detail';
+
 export const Route = createFileRoute('/_authenticated/_collections/collections_/$id')({
     component: CollectionDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: collectionDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/collections', label: 'Collections' },
@@ -52,6 +55,7 @@ function CollectionDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: collectionDetailDocument,
         createDocument: createCollectionDocument,
         transformCreateInput: values => {
@@ -105,7 +109,7 @@ function CollectionDetailPage() {
     const currentInheritFiltersValue = form.watch('inheritFilters');
 
     return (
-        <Page pageId="collection-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
@@ -204,7 +208,7 @@ function CollectionDetailPage() {
                         <FormMessage />
                     </FormItem>
                 </PageBlock>
-                <PageBlock column="main" blockId="contents" title={<Trans>Facet values</Trans>}>
+                <PageBlock column="main" blockId="contents" title={<Trans>Contents</Trans>}>
                     {shouldPreviewContents || creatingNewEntity ? (
                         <CollectionContentsPreviewTable
                             parentId={entity?.parent?.id}

package/src/app/routes/_authenticated/_collections/components/collection-bulk-actions.tsx

@@ -0,0 +1,123 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { FolderTree } from 'lucide-react';
+
+import { Trans } from '@/vdb/lib/trans.js';
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { api } from '@/vdb/graphql/api.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
+import {
+    assignCollectionToChannelDocument,
+    deleteCollectionsDocument,
+    removeCollectionFromChannelDocument,
+} from '../collections.graphql.js';
+import { MoveCollectionsDialog } from './move-collections-dialog.js';
+
+export const AssignCollectionsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const queryClient = useQueryClient();
+
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="collections"
+            mutationFn={api.mutate(assignCollectionToChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
+            buildInput={(channelId: string) => ({
+                collectionIds: selection.map(s => s.id),
+                channelId,
+            })}
+            onSuccess={() => {
+                queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+            }}
+        />
+    );
+};
+
+export const RemoveCollectionsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { selectedChannel } = useChannel();
+    const queryClient = useQueryClient();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="collections"
+            mutationFn={api.mutate(removeCollectionFromChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
+            buildInput={() => ({
+                collectionIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
+            onSuccess={() => {
+                queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+            }}
+        />
+    );
+};
+
+export const DuplicateCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const queryClient = useQueryClient();
+    return (
+        <DuplicateBulkAction
+            entityType="Collection"
+            duplicatorCode="collection-duplicator"
+            duplicatorArguments={[]}
+            requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
+            entityName="Collection"
+            selection={selection}
+            table={table}
+            onSuccess={() => {
+                queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+            }}
+        />
+    );
+};
+
+export const DeleteCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteCollectionsDocument}
+            entityName="collections"
+            requiredPermissions={['DeleteCatalog', 'DeleteCollection']}
+            invalidateQueries={['childCollections']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const MoveCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const queryClient = useQueryClient();
+    const { refetchPaginatedList } = usePaginatedList();
+
+    const handleSuccess = () => {
+        queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+        refetchPaginatedList();
+        table.resetRowSelection();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={['UpdateCatalog', 'UpdateCollection']}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Move</Trans>}
+                icon={FolderTree}
+            />
+            <MoveCollectionsDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                collectionsToMove={selection}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+};

package/src/app/routes/_authenticated/_collections/components/collection-contents-preview-table.tsx

@@ -1,8 +1,8 @@
-import { PaginatedListDataTable } from '@/components/shared/paginated-list-data-table.js';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert.js';
-import { Button } from '@/components/ui/button.js';
-import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
-import { graphql } from '@/graphql/graphql.js';
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Alert, AlertDescription, AlertTitle } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
@@ -61,13 +61,12 @@ export function CollectionContentsPreviewTable({
 
     return (
         <div>
-            <Alert>
+            <Alert className="mb-4">
                 <Eye className="h-4 w-4" />
                 <AlertTitle>Preview</AlertTitle>
                 <AlertDescription>
-                    This is a preview of the collection contents based on the current
-                    filter settings. Once you save the collection, the contents will be
-                    updated to reflect the new filter settings.
+                    This is a preview of the collection contents based on the current filter settings. Once
+                    you save the collection, the contents will be updated to reflect the new filter settings.
                 </AlertDescription>
             </Alert>
 

package/src/app/routes/_authenticated/_collections/components/collection-contents-sheet.tsx

@@ -1,15 +1,15 @@
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Sheet,
     SheetContent,
     SheetDescription,
     SheetHeader,
     SheetTitle,
-    SheetTrigger
-} from '@/components/ui/sheet.js';
-import { Trans } from '@/lib/trans.js';
+    SheetTrigger,
+} from '@/vdb/components/ui/sheet.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { PanelLeftOpen } from 'lucide-react';
 import { CollectionContentsTable } from './collection-contents-table.js';
-import { Button } from '@/components/ui/button.js';
 
 export interface CollectionContentsSheetProps {
     collectionId: string;
@@ -17,7 +17,11 @@ export interface CollectionContentsSheetProps {
     children?: React.ReactNode;
 }
 
-export function CollectionContentsSheet({ collectionId, collectionName, children }: CollectionContentsSheetProps) {
+export function CollectionContentsSheet({
+    collectionId,
+    collectionName,
+    children,
+}: CollectionContentsSheetProps) {
     return (
         <Sheet>
             <SheetTrigger asChild>

package/src/app/routes/_authenticated/_collections/components/collection-contents-table.tsx

@@ -1,7 +1,7 @@
-import { PaginatedListDataTable } from '@/components/shared/paginated-list-data-table.js';
-import { Button } from '@/components/ui/button.js';
-import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
-import { graphql } from '@/graphql/graphql.js';
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
@@ -24,21 +24,20 @@ export const collectionContentsDocument = graphql(`
     }
 `);
 
-
 export interface CollectionContentsTableProps {
     collectionId?: string;
 }
 
-export function CollectionContentsTable({ collectionId }: CollectionContentsTableProps) {
+export function CollectionContentsTable({ collectionId }: Readonly<CollectionContentsTableProps>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [filters, setFilters] = useState<ColumnFiltersState>([]);
-    
+
     return (
         <PaginatedListDataTable
             listQuery={addCustomFields(collectionContentsDocument)}
-            transformVariables={(variables) => {
+            transformVariables={variables => {
                 return {
                     ...variables,
                     collectionId: collectionId,
@@ -50,7 +49,9 @@ export function CollectionContentsTable({ collectionId }: CollectionContentsTabl
                     cell: ({ row }) => {
                         return (
                             <Button asChild variant="ghost">
-                                <Link to={`../../product-variants/${row.original.id}`}>{row.original.name} </Link>
+                                <Link to={`../../product-variants/${row.original.id}`}>
+                                    {row.original.name}{' '}
+                                </Link>
                             </Button>
                         );
                     },