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

package/src/lib/components/data-table/add-filter-menu.tsx

@@ -1,30 +1,23 @@
-import { Button } from '@/components/ui/button.js';
+import { DataTableFilterDialog } from '@/vdb/components/data-table/data-table-filter-dialog.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Dialog } from '@/vdb/components/ui/dialog.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
 import { Column, ColumnDef } from '@tanstack/react-table';
 import { PlusCircle } from 'lucide-react';
-import { Trans } from '@/lib/trans.js';
-import React, { useState } from 'react';
-import { camelCaseToTitleCase } from '@/lib/utils.js';
+import { useState } from 'react';
 
 export interface AddFilterMenuProps {
     columns: Column<any, unknown>[];
 }
 
-export function AddFilterMenu({ columns }: AddFilterMenuProps) {
+export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
     const [selectedColumn, setSelectedColumn] = useState<ColumnDef<any> | null>(null);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
@@ -53,9 +46,7 @@ export function AddFilterMenu({ columns }: AddFilterMenuProps) {
                     ))}
                 </DropdownMenuContent>
             </DropdownMenu>
-            {selectedColumn && (
-                <DataTableFilterDialog column={selectedColumn as any} />
-            )}
+            {selectedColumn && <DataTableFilterDialog column={selectedColumn as any} />}
         </Dialog>
     );
 }

package/src/lib/components/data-table/data-table-bulk-action-item.tsx

@@ -1,6 +1,6 @@
-import { usePermissions } from '@/hooks/use-permissions.js';
-import { Trans } from '@/lib/trans.js';
-import { cn } from '@/lib/utils.js';
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { LucideIcon } from 'lucide-react';
 import { useState } from 'react';
 import {

package/src/lib/components/data-table/data-table-bulk-actions.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-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 { getBulkActions } from '@/framework/data-table/data-table-extensions.js';
-import { BulkAction } from '@/framework/data-table/data-table-types.js';
-import { usePageBlock } from '@/hooks/use-page-block.js';
-import { usePage } from '@/hooks/use-page.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Table } from '@tanstack/react-table';
 import { ChevronDown } from 'lucide-react';
 import { useRef } from 'react';

package/src/lib/components/data-table/data-table-column-header.tsx

@@ -1,32 +1,14 @@
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
-import { FieldInfo } from '@/framework/document-introspection/get-document-structure.js';
-import { camelCaseToTitleCase } from '@/lib/utils.js';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
 import { ColumnDef, HeaderContext } from '@tanstack/table-core';
-import { ArrowDown, ArrowUp, ArrowUpDown, EllipsisVertical, Filter } from 'lucide-react';
-import React from 'react';
+import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
 
 export interface DataTableColumnHeaderProps {
     customConfig: Partial<ColumnDef<any>>;
     headerContext: HeaderContext<any, any>;
 }
 
-export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
+export function DataTableColumnHeader({ headerContext, customConfig }: Readonly<DataTableColumnHeaderProps>) {
     const { column } = headerContext;
     const isSortable = column.getCanSort();
 

package/src/lib/components/data-table/data-table-faceted-filter.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { Column } from '@tanstack/react-table';
-import { Check, FilterIcon, PlusCircle } from 'lucide-react';
+import { Check, FilterIcon } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
-import { Badge } from '@/components/ui/badge.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 {
     Command,
     CommandEmpty,
@@ -13,9 +12,10 @@ import {
     CommandItem,
     CommandList,
     CommandSeparator,
-} from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { Separator } from '@/components/ui/separator.js';
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 export interface DataTableFacetedFilterOption {
     label: string;

package/src/lib/components/data-table/data-table-filter-badge.tsx

@@ -1,4 +1,4 @@
-import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { CircleX, Filter } from 'lucide-react';
 import { Badge } from '../ui/badge.js';
 import { HumanReadableOperator, Operator } from './human-readable-operator.js';

package/src/lib/components/data-table/data-table-filter-dialog.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DialogClose,
     DialogContent,
@@ -6,8 +6,8 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Column } from '@tanstack/react-table';
 import { useState } from 'react';
 import { DataTableBooleanFilter } from './filters/data-table-boolean-filter.js';
@@ -21,7 +21,7 @@ export interface DataTableFilterDialogProps {
     column: Column<any>;
 }
 
-export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
+export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialogProps>) {
     const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
     const [filter, setFilter] = useState(columnFilter);
 

package/src/lib/components/data-table/data-table-pagination.tsx

@@ -1,8 +1,8 @@
 import { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 
-import { Button } from '@/components/ui/button.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
 interface DataTablePaginationProps<TData> {
     table: Table<TData>;

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -1,38 +1,31 @@
 'use client';
 
 import { DndContext, closestCenter } from '@dnd-kit/core';
-import {
-    restrictToVerticalAxis,
-} from '@dnd-kit/modifiers';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Table } from '@tanstack/react-table';
 import { GripVertical, Settings2 } from 'lucide-react';
 
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
-    DropdownMenuSeparator, DropdownMenuTrigger,
     DropdownMenu,
     DropdownMenuCheckboxItem,
     DropdownMenuContent,
-    DropdownMenuItem
-} from '@/components/ui/dropdown-menu.js';
-import { usePage } from '@/hooks/use-page.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
 interface DataTableViewOptionsProps<TData> {
     table: Table<TData>;
 }
 
 function SortableItem({ id, children }: { id: string; children: React.ReactNode }) {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-    } = useSortable({ id });
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
 
     const style = {
         transform: CSS.Transform.toString(transform),
@@ -65,7 +58,11 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
             const newColumns = [...columns];
             newColumns.splice(overIndex, 0, newColumns.splice(activeIndex, 1)[0]);
             if (page?.pageId) {
-                setTableSettings(page.pageId, 'columnOrder', newColumns.map(col => col.id));
+                setTableSettings(
+                    page.pageId,
+                    'columnOrder',
+                    newColumns.map(col => col.id),
+                );
             }
         }
     };
@@ -87,15 +84,22 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-[150px]">
-                    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
-                        <SortableContext items={columns.map(col => col.id)} strategy={verticalListSortingStrategy}>
+                    <DndContext
+                        collisionDetection={closestCenter}
+                        onDragEnd={handleDragEnd}
+                        modifiers={[restrictToVerticalAxis]}
+                    >
+                        <SortableContext
+                            items={columns.map(col => col.id)}
+                            strategy={verticalListSortingStrategy}
+                        >
                             {columns.map(column => (
                                 <SortableItem key={column.id} id={column.id}>
                                     <DropdownMenuCheckboxItem
                                         className="capitalize"
                                         checked={column.getIsVisible()}
                                         onCheckedChange={value => column.toggleVisibility(!!value)}
-                                        onSelect={(e) => e.preventDefault()}
+                                        onSelect={e => e.preventDefault()}
                                     >
                                         {column.id}
                                     </DropdownMenuCheckboxItem>

package/src/lib/components/data-table/data-table.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
-import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
-import { RefreshButton } from '@/components/data-table/refresh-button.js';
-import { Input } from '@/components/ui/input.js';
-import { Skeleton } from '@/components/ui/skeleton.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
-import { BulkAction } from '@/framework/data-table/data-table-types.js';
-import { useChannel } from '@/hooks/use-channel.js';
+import { DataTablePagination } from '@/vdb/components/data-table/data-table-pagination.js';
+import { DataTableViewOptions } from '@/vdb/components/data-table/data-table-view-options.js';
+import { RefreshButton } from '@/vdb/components/data-table/refresh-button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Skeleton } from '@/vdb/components/ui/skeleton.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
 import {
     ColumnDef,
     ColumnFilter,

package/src/lib/components/data-table/filters/data-table-boolean-filter.tsx

@@ -1,10 +1,10 @@
-import { Trans } from "@/lib/trans.js";
+import { Trans } from '@/vdb/lib/trans.js';
 
-import { Select, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.js";
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
-import { SelectContent } from "@/components/ui/select.js";
-import { useEffect, useState } from "react";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableBooleanFilterProps {
     value: Record<string, any> | undefined;
@@ -13,11 +13,14 @@ export interface DataTableBooleanFilterProps {
 
 export const BOOLEAN_OPERATORS = ['eq', 'isNull'] as const;
 
-export function DataTableBooleanFilter({ value: incomingValue, onChange }: DataTableBooleanFilterProps) {
-    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] ?? 'eq' : 'eq';
+export function DataTableBooleanFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableBooleanFilterProps>) {
+    const initialOperator = incomingValue ? (Object.keys(incomingValue)[0] ?? 'eq') : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : true;
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
-    const [value, setValue] = useState<boolean>(initialValue as boolean ?? true);
+    const [value, setValue] = useState<boolean>((initialValue as boolean) ?? true);
 
     useEffect(() => {
         onChange({ [operator]: value });

package/src/lib/components/data-table/filters/data-table-datetime-filter.tsx

@@ -1,9 +1,7 @@
-import { Trans } from "@/lib/trans.js";
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-import { SelectContent } from "@/components/ui/select.js";
-import { useEffect, useState } from "react";
-import { DateTimeInput } from "@/components/data-input/datetime-input.js";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableDateTimeFilterProps {
     value: Record<string, any> | undefined;
@@ -12,7 +10,10 @@ export interface DataTableDateTimeFilterProps {
 
 export const DATETIME_OPERATORS = ['eq', 'before', 'after', 'between', 'isNull'] as const;
 
-export function DataTableDateTimeFilter({ value: incomingValue, onChange }: DataTableDateTimeFilterProps) {
+export function DataTableDateTimeFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableDateTimeFilterProps>) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
@@ -67,25 +68,15 @@ export function DataTableDateTimeFilter({ value: incomingValue, onChange }: Data
                         ))}
                     </SelectContent>
                 </Select>
-                {operator !== 'isNull' && (
-                    operator === 'between' ? (
+                {operator !== 'isNull' &&
+                    (operator === 'between' ? (
                         <div className="space-y-2">
-                            <DateTimeInput
-                                value={startDate}
-                                onChange={setStartDate}
-                            />
-                            <DateTimeInput
-                                value={endDate}
-                                onChange={setEndDate}
-                            />
+                            <DateTimeInput value={startDate} onChange={setStartDate} />
+                            <DateTimeInput value={endDate} onChange={setEndDate} />
                         </div>
                     ) : (
-                        <DateTimeInput
-                            value={value}
-                            onChange={setValue}
-                        />
-                    )
-                )}
+                        <DateTimeInput value={value} onChange={setValue} />
+                    ))}
             </div>
             {error && <p className="text-sm text-red-500">{error}</p>}
         </div>

package/src/lib/components/data-table/filters/data-table-id-filter.tsx

@@ -1,11 +1,9 @@
-import { Trans } from "@/lib/trans.js";
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { useEffect, useState } from "react";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { Input } from '@/vdb/components/ui/input.js';
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableIdFilterProps {
     value: Record<string, any> | undefined;
@@ -14,7 +12,7 @@ export interface DataTableIdFilterProps {
 
 export const ID_OPERATORS = ['eq', 'notEq', 'in', 'notIn', 'isNull'] as const;
 
-export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableIdFilterProps) {
+export function DataTableIdFilter({ value: incomingValue, onChange }: Readonly<DataTableIdFilterProps>) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
@@ -25,7 +23,10 @@ export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableI
             onChange({ [operator]: true });
         } else if (operator === 'in' || operator === 'notIn') {
             // Split by comma and trim whitespace
-            const values = value.split(',').map(v => v.trim()).filter(v => v);
+            const values = value
+                .split(',')
+                .map(v => v.trim())
+                .filter(v => v);
             onChange({ [operator]: values });
         } else {
             onChange({ [operator]: value });
@@ -48,7 +49,11 @@ export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableI
             </Select>
             {operator !== 'isNull' && (
                 <Input
-                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated IDs..." : "Enter ID..."}
+                    placeholder={
+                        operator === 'in' || operator === 'notIn'
+                            ? 'Enter comma-separated IDs...'
+                            : 'Enter ID...'
+                    }
                     value={value}
                     onChange={e => setValue(e.target.value)}
                 />

package/src/lib/components/data-table/filters/data-table-number-filter.tsx

@@ -1,11 +1,9 @@
-import { Trans } from "@/lib/trans.js";
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { MoneyInput } from "@/components/data-input/money-input.js";
-import { useEffect, useState } from "react";
-import { useChannel } from "@/hooks/use-channel.js";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableNumberFilterProps {
     mode: 'number' | 'money';
@@ -15,7 +13,11 @@ export interface DataTableNumberFilterProps {
 
 export const NUMBER_OPERATORS = ['eq', 'gt', 'gte', 'lt', 'lte', 'isNull', 'between'] as const;
 
-export function DataTableNumberFilter({ mode, value: incomingValue, onChange }: DataTableNumberFilterProps) {
+export function DataTableNumberFilter({
+    mode,
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableNumberFilterProps>) {
     const { activeChannel } = useChannel();
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : 0;
@@ -72,7 +74,7 @@ export function DataTableNumberFilter({ mode, value: incomingValue, onChange }:
             return (
                 <MoneyInput
                     value={parseFloat(value) || 0}
-                    onChange={(newValue) => onChange(newValue.toString())}
+                    onChange={newValue => onChange(newValue.toString())}
                     currency={activeChannel?.defaultCurrencyCode ?? 'USD'}
                 />
             );
@@ -102,16 +104,15 @@ export function DataTableNumberFilter({ mode, value: incomingValue, onChange }:
                         ))}
                     </SelectContent>
                 </Select>
-                {operator !== 'isNull' && (
-                    operator === 'between' ? (
+                {operator !== 'isNull' &&
+                    (operator === 'between' ? (
                         <div className="flex gap-2">
-                            {renderInput(minValue, setMinValue, "Min")}
-                            {renderInput(maxValue, setMaxValue, "Max")}
+                            {renderInput(minValue, setMinValue, 'Min')}
+                            {renderInput(maxValue, setMaxValue, 'Max')}
                         </div>
                     ) : (
-                        renderInput(value, setValue, "Enter value...")
-                    )
-                )}
+                        renderInput(value, setValue, 'Enter value...')
+                    ))}
             </div>
             {error && <p className="text-sm text-red-500">{error}</p>}
         </div>

package/src/lib/components/data-table/filters/data-table-string-filter.tsx

@@ -1,20 +1,30 @@
-import { Trans } from "@/lib/trans.js";
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { useEffect, useState } from "react";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { Input } from '@/vdb/components/ui/input.js';
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableStringFilterProps {
     value: Record<string, any> | undefined;
     onChange: (filter: Record<string, any>) => void;
 }
 
-export const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'] as const;
+export const STRING_OPERATORS = [
+    'eq',
+    'notEq',
+    'contains',
+    'notContains',
+    'in',
+    'notIn',
+    'regex',
+    'isNull',
+] as const;
 
-export function DataTableStringFilter({ value: incomingValue, onChange }: DataTableStringFilterProps) {
+export function DataTableStringFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableStringFilterProps>) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'contains';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
     const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
@@ -26,7 +36,10 @@ export function DataTableStringFilter({ value: incomingValue, onChange }: DataTa
         } else if (operator === 'in' || operator === 'notIn') {
             // Split by comma and trim whitespace
             if (typeof value === 'string') {
-                const values = value.split(',').map(v => v.trim()).filter(v => v);
+                const values = value
+                    .split(',')
+                    .map(v => v.trim())
+                    .filter(v => v);
                 onChange({ [operator]: values });
             } else {
                 onChange({ [operator]: [] });
@@ -52,11 +65,15 @@ export function DataTableStringFilter({ value: incomingValue, onChange }: DataTa
             </Select>
             {operator !== 'isNull' && (
                 <Input
-                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated values..." : "Enter filter value..."}
+                    placeholder={
+                        operator === 'in' || operator === 'notIn'
+                            ? 'Enter comma-separated values...'
+                            : 'Enter filter value...'
+                    }
                     value={value}
                     onChange={e => setValue(e.target.value)}
                 />
             )}
         </div>
-    )
+    );
 }

package/src/lib/components/data-table/human-readable-operator.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/lib/trans.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { BOOLEAN_OPERATORS } from './filters/data-table-boolean-filter.js';
 import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
 import { ID_OPERATORS } from './filters/data-table-id-filter.js';

package/src/lib/components/data-table/refresh-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import { RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -22,7 +22,10 @@ function useDelayedLoading(isLoading: boolean, delayMs: number = 100) {
     return delayedLoading;
 }
 
-export function RefreshButton({ onRefresh, isLoading }: { onRefresh: () => void; isLoading: boolean }) {
+export function RefreshButton({
+    onRefresh,
+    isLoading,
+}: Readonly<{ onRefresh: () => void; isLoading: boolean }>) {
     const delayedLoading = useDelayedLoading(isLoading, 100);
 
     const handleClick = () => {

package/src/lib/components/layout/app-layout.tsx

@@ -1,11 +1,11 @@
-import { AppSidebar } from '@/components/layout/app-sidebar.js';
-import { GeneratedBreadcrumbs } from '@/components/layout/generated-breadcrumbs.js';
-import { PrereleasePopup } from '@/components/layout/prerelease-popup.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Separator } from '@/components/ui/separator.js';
-import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
+import { AppSidebar } from '@/vdb/components/layout/app-sidebar.js';
+import { GeneratedBreadcrumbs } from '@/vdb/components/layout/generated-breadcrumbs.js';
+import { PrereleasePopup } from '@/vdb/components/layout/prerelease-popup.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/vdb/components/ui/sidebar.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Outlet } from '@tanstack/react-router';
 import { Alerts } from '../shared/alerts.js';