@vendure/dashboard 3.3.6-master-202507020959 → 3.3.6-master-202507030234

package/src/lib/components/shared/error-page.tsx

@@ -1,7 +1,7 @@
-import { Page, PageBlock, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { Trans } from '@/lib/trans.js';
+import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { AlertCircle } from 'lucide-react';
-import { Alert, AlertTitle, AlertDescription } from '../ui/alert.js';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert.js';
 
 export interface ErrorPageProps {
     message: string;
@@ -11,14 +11,14 @@ export interface ErrorPageProps {
  * @description
  * A generic error page that displays an error message.
  */
-export function ErrorPage({ message }: ErrorPageProps) {
+export function ErrorPage({ message }: Readonly<ErrorPageProps>) {
     return (
-        <Page pageId='error-page'>
+        <Page pageId="error-page">
             <PageTitle>
                 <Trans>Error</Trans>
             </PageTitle>
             <PageLayout>
-                <PageBlock column="main" blockId='error-message'>
+                <PageBlock column="main" blockId="error-message">
                     <Alert variant="destructive">
                         <AlertCircle className="h-4 w-4" />
                         <AlertTitle>Error</AlertTitle>

package/src/lib/components/shared/facet-value-chip.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { X } from 'lucide-react';
 
 // Interface for facet value type
@@ -20,15 +20,22 @@ interface FacetValueChipProps {
     onRemove?: (id: string) => void;
 }
 
-export function FacetValueChip({ facetValue, removable = true, onRemove, displayFacetName = true }: FacetValueChipProps) {
+export function FacetValueChip({
+    facetValue,
+    removable = true,
+    onRemove,
+    displayFacetName = true,
+}: FacetValueChipProps) {
     return (
-        <Badge 
+        <Badge
             variant="secondary"
             className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
         >
             <div className="flex items-center gap-1.5">
                 <span className="font-medium">{facetValue.name}</span>
-                {displayFacetName && <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>}
+                {displayFacetName && (
+                    <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>
+                )}
             </div>
             {removable && (
                 <button
@@ -42,4 +49,4 @@ export function FacetValueChip({ facetValue, removable = true, onRemove, display
             )}
         </Badge>
     );
-} 
+}

package/src/lib/components/shared/facet-value-selector.tsx

@@ -1,11 +1,18 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useDebounce } from '@uidotdev/usehooks';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
 import { ChevronRight, Loader2, Plus } from 'lucide-react';
 import React, { useState } from 'react';
 
@@ -99,13 +106,13 @@ export function FacetValueSelector({
             return api.query(getFacetValueListDocument, {
                 options: {
                     filter: {
-                        name: { contains: debouncedSearch }
+                        name: { contains: debouncedSearch },
                     },
-                    take: 100
-                }
+                    take: 100,
+                },
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
     });
 
     // Query for facets based on search
@@ -118,13 +125,13 @@ export function FacetValueSelector({
             return api.query(getFacetListDocument, {
                 options: {
                     filter: {
-                        name: { contains: debouncedSearch }
+                        name: { contains: debouncedSearch },
                     },
-                    take: 100
-                }
+                    take: 100,
+                },
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
     });
 
     // Query for paginated values of a specific facet when expanded
@@ -133,7 +140,7 @@ export function FacetValueSelector({
         isLoading: isLoadingExpandedFacet,
         fetchNextPage,
         hasNextPage,
-        isFetchingNextPage
+        isFetchingNextPage,
     } = useInfiniteQuery({
         queryKey: ['facetValues', expandedFacetId, 'infinite'],
         queryFn: async ({ pageParam = 0 }) => {
@@ -144,7 +151,7 @@ export function FacetValueSelector({
                     sort: { code: 'ASC' },
                     skip: pageParam * pageSize,
                     take: pageSize,
-                }
+                },
             });
             return response.facetValues;
         },
@@ -163,22 +170,23 @@ export function FacetValueSelector({
     const expandedFacetName = expandedFacetValues[0]?.facet.name;
 
     // Group facet values by facet
-    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>((groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
-        const facetId = facetValue.facet.id;
-        if (!groups[facetId]) {
-            groups[facetId] = [];
-        }
-        groups[facetId].push(facetValue);
-        return groups;
-    }, {});
+    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>(
+        (groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
+            const facetId = facetValue.facet.id;
+            if (!groups[facetId]) {
+                groups[facetId] = [];
+            }
+            groups[facetId].push(facetValue);
+            return groups;
+        },
+        {},
+    );
 
     const isLoading = isLoadingFacetValues || isLoadingFacets || isLoadingExpandedFacet;
 
     const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
         const target = e.currentTarget;
-        const scrolledToBottom = Math.abs(
-            target.scrollHeight - target.clientHeight - target.scrollTop
-        ) < 1;
+        const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
 
         if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
             fetchNextPage();
@@ -188,32 +196,23 @@ export function FacetValueSelector({
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button 
-                    variant="outline" 
-                    size="sm" 
-                    type="button"
-                    disabled={disabled}
-                    className="gap-2"
-                >
+                <Button variant="outline" size="sm" type="button" disabled={disabled} className="gap-2">
                     <Plus className="h-4 w-4" />
                     <Trans>Add facet values</Trans>
                 </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0 w-[400px]" align="start">
                 <Command shouldFilter={false}>
-                    <CommandInput 
-                        placeholder={placeholder} 
+                    <CommandInput
+                        placeholder={placeholder}
                         value={searchTerm}
-                        onValueChange={(value) => {
+                        onValueChange={value => {
                             setSearchTerm(value);
                             setExpandedFacetId(null);
                         }}
                         disabled={disabled}
                     />
-                    <CommandList 
-                        className="h-[200px] overflow-y-auto" 
-                        onScroll={handleScroll}
-                    >
+                    <CommandList className="h-[200px] overflow-y-auto" onScroll={handleScroll}>
                         <CommandEmpty>
                             {debouncedSearch.length < 2 ? (
                                 <Trans>Type at least 2 characters to search...</Trans>
@@ -223,7 +222,7 @@ export function FacetValueSelector({
                                 <Trans>No results found</Trans>
                             )}
                         </CommandEmpty>
-                        
+
                         {expandedFacetId ? (
                             <>
                                 <CommandGroup>
@@ -235,7 +234,7 @@ export function FacetValueSelector({
                                     </CommandItem>
                                 </CommandGroup>
                                 <CommandGroup heading={expandedFacetName}>
-                                    {expandedFacetValues.map((facetValue) => (
+                                    {expandedFacetValues.map(facetValue => (
                                         <CommandItem
                                             key={facetValue.id}
                                             value={facetValue.id}
@@ -265,7 +264,7 @@ export function FacetValueSelector({
                             <>
                                 {facets.length > 0 && (
                                     <CommandGroup heading={<Trans>Facets</Trans>}>
-                                        {facets.map((facet) => (
+                                        {facets.map(facet => (
                                             <CommandItem
                                                 key={facet.id}
                                                 value={`facet-${facet.id}`}
@@ -278,24 +277,26 @@ export function FacetValueSelector({
                                         ))}
                                     </CommandGroup>
                                 )}
-                                
-                                {Object.entries(facetGroups).map(([facetId, values]: [string, FacetValue[]]) => (
-                                    <CommandGroup key={facetId} heading={values[0]?.facet.name}>
-                                        {values.map((facetValue: FacetValue) => (
-                                            <CommandItem
-                                                key={facetValue.id}
-                                                value={facetValue.id}
-                                                onSelect={() => {
-                                                    onValueSelect(facetValue);
-                                                    setSearchTerm('');
-                                                    setOpen(false);
-                                                }}
-                                            >
-                                                {facetValue.name}
-                                            </CommandItem>
-                                        ))}
-                                    </CommandGroup>
-                                ))}
+
+                                {Object.entries(facetGroups).map(
+                                    ([facetId, values]: [string, FacetValue[]]) => (
+                                        <CommandGroup key={facetId} heading={values[0]?.facet.name}>
+                                            {values.map((facetValue: FacetValue) => (
+                                                <CommandItem
+                                                    key={facetValue.id}
+                                                    value={facetValue.id}
+                                                    onSelect={() => {
+                                                        onValueSelect(facetValue);
+                                                        setSearchTerm('');
+                                                        setOpen(false);
+                                                    }}
+                                                >
+                                                    {facetValue.name}
+                                                </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                    ),
+                                )}
                             </>
                         )}
                     </CommandList>

package/src/lib/components/shared/history-timeline/history-entry.tsx

@@ -1,13 +1,13 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { Separator } from '@/components/ui/separator.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
 import { useCallback } from 'react';
 import { useHistoryTimeline } from './history-timeline.js';
@@ -33,7 +33,13 @@ interface HistoryEntryProps {
     children: React.ReactNode;
 }
 
-export function HistoryEntry({ entry, isNoteEntry, timelineIcon, title, children }: HistoryEntryProps) {
+export function HistoryEntry({
+    entry,
+    isNoteEntry,
+    timelineIcon,
+    title,
+    children,
+}: Readonly<HistoryEntryProps>) {
     const { formatDate } = useLocalFormat();
     const { editNote, deleteNote } = useHistoryTimeline();
 

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -1,12 +1,12 @@
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Trans } from '@/lib/trans.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
 interface HistoryNoteCheckboxProps {
     value: boolean;
     onChange: (value: boolean) => void;
 }
 
-export function HistoryNoteCheckbox({ value, onChange }: HistoryNoteCheckboxProps) {
+export function HistoryNoteCheckbox({ value, onChange }: Readonly<HistoryNoteCheckboxProps>) {
     return (
         <div className="flex items-center space-x-2">
             <Checkbox

package/src/lib/components/shared/history-timeline/history-note-editor.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -6,9 +6,9 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Textarea } from '@/components/ui/textarea.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 

package/src/lib/components/shared/history-timeline/history-note-input.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/components/ui/button.js';
-import { Textarea } from '@/components/ui/textarea.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 
@@ -7,7 +7,7 @@ interface HistoryNoteInputProps {
     onAddNote: (note: string, isPrivate: boolean) => void;
 }
 
-export function HistoryNoteInput({ onAddNote }: HistoryNoteInputProps) {
+export function HistoryNoteInput({ onAddNote }: Readonly<HistoryNoteInputProps>) {
     const [note, setNote] = useState('');
     const [noteIsPrivate, setNoteIsPrivate] = useState(true);
 

package/src/lib/components/shared/history-timeline/history-timeline.tsx

@@ -1,5 +1,5 @@
-import { ScrollArea } from '@/components/ui/scroll-area.js';
-import { useState, createContext, useContext } from 'react';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+import { createContext, useContext, useState } from 'react';
 import { HistoryNoteEditor } from './history-note-editor.js';
 
 interface HistoryTimelineProps {
@@ -13,7 +13,10 @@ interface HistoryTimelineProps {
 const HistoryTimelineContext = createContext<{
     editNote: (noteId: string, note: string, isPrivate: boolean) => void;
     deleteNote: (noteId: string) => void;
-}>({ editNote: () => {}, deleteNote: () => {} });
+}>({
+    editNote: () => {},
+    deleteNote: () => {},
+});
 
 type NoteEditorNote = { noteId: string; note: string; isPrivate: boolean };
 
@@ -21,25 +24,29 @@ export function useHistoryTimeline() {
     return useContext(HistoryTimelineContext);
 }
 
-export function HistoryTimeline({ children, onEditNote, onDeleteNote }: HistoryTimelineProps) {
+export function HistoryTimeline({ children, onEditNote, onDeleteNote }: Readonly<HistoryTimelineProps>) {
     const [noteEditorOpen, setNoteEditorOpen] = useState(false);
-    const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({ noteId: '', note: '', isPrivate: true });
+    const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({
+        noteId: '',
+        note: '',
+        isPrivate: true,
+    });
 
     const editNote = (noteId: string, note: string, isPrivate: boolean) => {
         setNoteEditorNote({ noteId, note, isPrivate });
         setNoteEditorOpen(true);
-    }
+    };
 
     const deleteNote = (noteId: string) => {
         setNoteEditorNote({ noteId, note: '', isPrivate: true });
-    }
+    };
 
     return (
         <HistoryTimelineContext.Provider value={{ editNote, deleteNote }}>
             <ScrollArea className=" pr-4">
                 <div className="relative">
                     <div className="absolute left-5 top-0 bottom-[44px] w-0.5 bg-gray-200" />
-                {children}
+                    {children}
                 </div>
             </ScrollArea>
             <HistoryNoteEditor

package/src/lib/components/shared/language-selector.tsx

@@ -1,9 +1,9 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
 
 const availableGlobalLanguages = graphql(`
     query AvailableGlobalLanguages {
@@ -32,7 +32,7 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
 
     const items = (availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? []).map(language => ({
         value: language,
-        label: formatLanguageName(language)
+        label: formatLanguageName(language),
     }));
 
     return (

package/src/lib/components/shared/multi-select.tsx

@@ -1,8 +1,8 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { Badge } from '@/components/ui/badge.js';
-import { X, ChevronDown } from 'lucide-react';
-import { cn } from '@/lib/utils.js';
-import { Button } from '@/components/ui/button.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { ChevronDown, X } from 'lucide-react';
 import { useState } from 'react';
 import { Input } from '../ui/input.js';
 

package/src/lib/components/shared/navigation-confirmation.tsx

@@ -1,9 +1,16 @@
-import { Trans } from '@/lib/trans.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useBlocker } from '@tanstack/react-router';
 import { UseFormReturn } from 'react-hook-form';
 
 import { Button } from '../ui/button.js';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '../ui/dialog.js';
 
 export interface NavigationConfirmationProps {
     form: UseFormReturn<any>;
@@ -14,11 +21,13 @@ export interface NavigationConfirmationProps {
  */
 export function NavigationConfirmation(props: Readonly<NavigationConfirmationProps>) {
     const { proceed, reset, status } = useBlocker({
-        shouldBlockFn: (args) => {
+        shouldBlockFn: args => {
             // When a new entity is being created, we don't want to block navigation
             // to the newly-created entity page.
-            const isNavigatingToNewlyCreatedEntity = args.current.fullPath === args.next.fullPath
-                && args.current.params.id === 'new' && args.next.params.id !== 'new'
+            const isNavigatingToNewlyCreatedEntity =
+                args.current.fullPath === args.next.fullPath &&
+                args.current.params.id === 'new' &&
+                args.next.params.id !== 'new';
             if (isNavigatingToNewlyCreatedEntity) {
                 return false;
             }
@@ -31,14 +40,20 @@ export function NavigationConfirmation(props: Readonly<NavigationConfirmationPro
         <Dialog open={status === 'blocked'} onOpenChange={reset}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle><Trans>Confirm navigation</Trans></DialogTitle>
+                    <DialogTitle>
+                        <Trans>Confirm navigation</Trans>
+                    </DialogTitle>
                     <DialogDescription>
-                        <Trans>Are you sure you want to navigate away from this page? Any unsaved changes will be
-                            lost.</Trans>
+                        <Trans>
+                            Are you sure you want to navigate away from this page? Any unsaved changes will be
+                            lost.
+                        </Trans>
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
-                    <Button variant="outline" onClick={reset}><Trans>Cancel</Trans></Button>
+                    <Button variant="outline" onClick={reset}>
+                        <Trans>Cancel</Trans>
+                    </Button>
                     <Button type="button" onClick={proceed}>
                         <Trans>Confirm</Trans>
                     </Button>

package/src/lib/components/shared/option-value-input.tsx

@@ -1,10 +1,9 @@
-import { useFieldArray } from "react-hook-form";
-import { useFormContext } from "react-hook-form";
-import { useState } from "react";
-import { Input } from "@/components/ui/input.js";
-import { Button } from "@/components/ui/button.js";
-import { Badge } from "@/components/ui/badge.js";
-import { Plus, X } from "lucide-react";
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Plus, X } from 'lucide-react';
+import { useState } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
 
 interface OptionValue {
     value: string;
@@ -16,12 +15,15 @@ interface FormValues {
         name: string;
         values: OptionValue[];
     }[];
-    variants: Record<string, {
-        enabled: boolean;
-        sku: string;
-        price: string;
-        stock: string;
-    }>;
+    variants: Record<
+        string,
+        {
+            enabled: boolean;
+            sku: string;
+            price: string;
+            stock: string;
+        }
+    >;
 }
 
 interface OptionValueInputProps {
@@ -29,7 +31,7 @@ interface OptionValueInputProps {
     disabled?: boolean;
 }
 
-export function OptionValueInput({ groupIndex, disabled = false }: OptionValueInputProps) {
+export function OptionValueInput({ groupIndex, disabled = false }: Readonly<OptionValueInputProps>) {
     const { control, watch } = useFormContext<FormValues>();
     const { fields, append, remove } = useFieldArray({
         control,
@@ -92,4 +94,4 @@ export function OptionValueInput({ groupIndex, disabled = false }: OptionValueIn
             </div>
         </div>
     );
-}
+}

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -1,12 +1,12 @@
-import { DataTableColumnHeader } from '@/components/data-table/data-table-column-header.js';
-import { DataTable, FacetedFilter } from '@/components/data-table/data-table.js';
+import { DataTableColumnHeader } from '@/vdb/components/data-table/data-table-column-header.js';
+import { DataTable, FacetedFilter } from '@/vdb/components/data-table/data-table.js';
 import {
     FieldInfo,
     getObjectPathToPaginatedList,
     getTypeFieldInfo,
-} from '@/framework/document-introspection/get-document-structure.js';
-import { useListQueryFields } from '@/framework/document-introspection/hooks.js';
-import { api } from '@/graphql/api.js';
+} from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { useListQueryFields } from '@/vdb/framework/document-introspection/hooks.js';
+import { api } from '@/vdb/graphql/api.js';
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
@@ -20,18 +20,18 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
     AlertDialogTrigger,
-} from '@/components/ui/alert-dialog.js';
+} from '@/vdb/components/ui/alert-dialog.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { DisplayComponent } from '@/framework/component-registry/dynamic-component.js';
-import { BulkAction } from '@/framework/data-table/data-table-types.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { useExtendedListQuery } from '@/hooks/use-extended-list-query.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { DisplayComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useExtendedListQuery } from '@/vdb/hooks/use-extended-list-query.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
     ColumnFiltersState,