fix(dashboard): Use dedicated @/vdb alias for imports (#3631)

packages/dashboard/scripts/check-lib-imports.js

@@ -2,6 +2,7 @@
 
 import fs from 'fs';
 import path from 'path';
+import process from 'process';
 import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -10,32 +11,29 @@ const __dirname = path.dirname(__filename);
 // Check if we're running from the dashboard directory or root directory
 const currentDir = process.cwd();
 const isDashboardDir = currentDir.endsWith('packages/dashboard');
-const LIB_DIR = isDashboardDir
-    ? path.join(__dirname, '../src/lib')
-    : path.join(currentDir, 'packages/dashboard/src/lib');
+const HOOKS_DIR = isDashboardDir
+    ? path.join(__dirname, '../src/lib/hooks')
+    : path.join(currentDir, 'packages/dashboard/src/lib/hooks');
 
-// Allowlist of @/ imports that are safe to keep
-const ALLOWED_IMPORTS = ['@/lib/trans.js', '@/lib/utils.js', '@/components/ui'];
+// Required prefix for imports in hook files
+const REQUIRED_PREFIX = '@/vdb';
 
 function findHookFiles(dir) {
     const files = [];
 
-    function traverse(currentDir) {
-        const items = fs.readdirSync(currentDir);
+    // Since we're now looking directly in the hooks directory,
+    // we can just get all .ts and .tsx files that start with 'use-'
+    const items = fs.readdirSync(dir);
 
-        for (const item of items) {
-            const fullPath = path.join(currentDir, item);
-            const stat = fs.statSync(fullPath);
+    for (const item of items) {
+        const fullPath = path.join(dir, item);
+        const stat = fs.statSync(fullPath);
 
-            if (stat.isDirectory()) {
-                traverse(fullPath);
-            } else if (item.startsWith('use-') && (item.endsWith('.ts') || item.endsWith('.tsx'))) {
-                files.push(fullPath);
-            }
+        if (stat.isFile() && item.startsWith('use-') && (item.endsWith('.ts') || item.endsWith('.tsx'))) {
+            files.push(fullPath);
         }
     }
 
-    traverse(dir);
     return files;
 }
 
@@ -48,23 +46,23 @@ function checkFileForBadImports(filePath) {
         const line = lines[i];
         const trimmedLine = line.trim();
 
-        // Check for import statements that start with @/
-        if (trimmedLine.startsWith('import') && trimmedLine.includes('@/')) {
-            // Check if this import is in the allowlist
-            const isAllowed = ALLOWED_IMPORTS.some(allowed => {
-                if (allowed.endsWith('/')) {
-                    // For directory patterns like '@/components/ui'
-                    return trimmedLine.includes(allowed);
-                } else {
-                    // For exact file matches
-                    return trimmedLine.includes(allowed);
-                }
-            });
-
-            if (!isAllowed) {
+        // Check for import statements
+        if (trimmedLine.startsWith('import')) {
+            // Check for relative imports that go up directories (../)
+            if (trimmedLine.includes('../')) {
+                badImports.push({
+                    line: i + 1,
+                    content: trimmedLine,
+                    reason: 'Relative imports going up directories (../) are not allowed in hook files',
+                });
+            }
+
+            // Check for @/ imports that don't start with @/vdb
+            if (trimmedLine.includes('@/') && !trimmedLine.includes(REQUIRED_PREFIX)) {
                 badImports.push({
                     line: i + 1,
                     content: trimmedLine,
+                    reason: `Import must start with ${REQUIRED_PREFIX}`,
                 });
             }
         }
@@ -74,19 +72,21 @@ function checkFileForBadImports(filePath) {
 }
 
 function main() {
-    console.log('🔍 Checking for @/ imports in hook files (use-*.ts/tsx) in src/lib directory...\n');
-    console.log('✅ Allowed imports:');
-    ALLOWED_IMPORTS.forEach(allowed => {
-        console.log(`   - ${allowed}`);
-    });
+    console.log(
+        '🔍 Checking for import patterns in hook files (use-*.ts/tsx) in src/lib/hooks directory...\n',
+    );
+    console.log('✅ Requirements:');
+    console.log(`   - All imports must start with ${REQUIRED_PREFIX}`);
+    console.log('   - Relative imports going up directories (../) are not allowed');
+    console.log('   - Relative imports in same directory (./) are allowed');
     console.log('');
 
-    if (!fs.existsSync(LIB_DIR)) {
-        console.error('❌ src/lib directory not found!');
+    if (!fs.existsSync(HOOKS_DIR)) {
+        console.error('❌ src/lib/hooks directory not found!');
         process.exit(1);
     }
 
-    const files = findHookFiles(LIB_DIR);
+    const files = findHookFiles(HOOKS_DIR);
     let hasBadImports = false;
     let totalBadImports = 0;
 
@@ -101,6 +101,7 @@ function main() {
             console.log(`❌ ${relativePath}:`);
             for (const badImport of badImports) {
                 console.log(`   Line ${badImport.line}: ${badImport.content}`);
+                console.log(`      Reason: ${badImport.reason}`);
             }
             console.log('');
         }
@@ -108,11 +109,13 @@ function main() {
 
     if (hasBadImports) {
         console.log(`❌ Found ${totalBadImports} bad import(s) in ${files.length} hook file(s)`);
-        console.log('💡 All imports in hook files should use relative paths, except for allowed imports');
+        console.log(
+            `💡 All imports in hook files must start with ${REQUIRED_PREFIX} and must not use relative paths going up directories`,
+        );
         process.exit(1);
     } else {
         console.log(`✅ No bad imports found in ${files.length} hook file(s)`);
-        console.log('🎉 All imports in hook files are using relative paths or allowed @/ paths');
+        console.log(`🎉 All imports in hook files are using ${REQUIRED_PREFIX} prefix`);
     }
 }
 

packages/dashboard/scripts/generate-index.js

@@ -6,7 +6,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const TARGET_DIRS = ['components', 'framework', 'hooks', 'lib', 'graphql'];
-const LIB_DIR = path.join(__dirname, 'src', 'lib');
+const LIB_DIR = path.join(__dirname, '..', 'src', 'lib');
 const INDEX_FILE = path.join(LIB_DIR, 'index.ts');
 
 function getAllFiles(dir, fileList = []) {

packages/dashboard/src/app/app-providers.tsx

@@ -1,9 +1,9 @@
-import { AuthProvider } from '@/providers/auth.js';
-import { ChannelProvider } from '@/providers/channel-provider.js';
-import { I18nProvider } from '@/providers/i18n-provider.js';
-import { ServerConfigProvider } from '@/providers/server-config.js';
-import { ThemeProvider } from '@/providers/theme-provider.js';
-import { UserSettingsProvider } from '@/providers/user-settings.js';
+import { AuthProvider } from '@/vdb/providers/auth.js';
+import { ChannelProvider } from '@/vdb/providers/channel-provider.js';
+import { I18nProvider } from '@/vdb/providers/i18n-provider.js';
+import { ServerConfigProvider } from '@/vdb/providers/server-config.js';
+import { ThemeProvider } from '@/vdb/providers/theme-provider.js';
+import { UserSettingsProvider } from '@/vdb/providers/user-settings.js';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';

packages/dashboard/src/app/common/delete-bulk-action.tsx

@@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { TrashIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { api } from '@/graphql/api.js';
-import { getMutationName, usePaginatedList } from '@/index.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/vdb/graphql/api.js';
+import { getMutationName, usePaginatedList } from '@/vdb/index.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 
 interface DeleteBulkActionProps {
     /** The GraphQL mutation document to execute */

packages/dashboard/src/app/common/duplicate-bulk-action.tsx

@@ -3,11 +3,11 @@ import { CopyIcon } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { api } from '@/graphql/api.js';
-import { duplicateEntityDocument } from '@/graphql/common-operations.js';
-import { usePaginatedList } from '@/index.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/vdb/graphql/api.js';
+import { duplicateEntityDocument } from '@/vdb/graphql/common-operations.js';
+import { usePaginatedList } from '@/vdb/index.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 
 interface DuplicateBulkActionProps {
     entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';

packages/dashboard/src/app/main.tsx

@@ -1,12 +1,12 @@
-import { Toaster } from '@/components/ui/sonner.js';
-import { registerDefaults } from '@/framework/defaults.js';
-import { setCustomFieldsMap } from '@/framework/document-introspection/add-custom-fields.js';
-import { executeDashboardExtensionCallbacks } from '@/framework/extension-api/define-dashboard-extension.js';
-import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
-import { useExtendedRouter } from '@/framework/page/use-extended-router.js';
-import { useAuth } from '@/hooks/use-auth.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { defaultLocale, dynamicActivate } from '@/providers/i18n-provider.js';
+import { Toaster } from '@/vdb/components/ui/sonner.js';
+import { registerDefaults } from '@/vdb/framework/defaults.js';
+import { setCustomFieldsMap } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { executeDashboardExtensionCallbacks } from '@/vdb/framework/extension-api/define-dashboard-extension.js';
+import { useDashboardExtensions } from '@/vdb/framework/extension-api/use-dashboard-extensions.js';
+import { useExtendedRouter } from '@/vdb/framework/page/use-extended-router.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { defaultLocale, dynamicActivate } from '@/vdb/providers/i18n-provider.js';
 import { createRouter, RouterProvider } from '@tanstack/react-router';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';

packages/dashboard/src/app/routes/__root.tsx

@@ -1,7 +1,6 @@
-import { AuthContext } from '@/providers/auth.js';
+import { AuthContext } from '@/vdb/providers/auth.js';
 import { QueryClient } from '@tanstack/react-query';
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 
 export interface MyRouterContext {
     auth: AuthContext;

packages/dashboard/src/app/routes/_authenticated.tsx

@@ -1,6 +1,6 @@
-import { AppLayout } from '@/components/layout/app-layout.js';
-import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
-import { useAuth } from '@/hooks/use-auth.js';
+import { AppLayout } from '@/vdb/components/layout/app-layout.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '@/vdb/constants.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
 
 export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({

packages/dashboard/src/app/routes/_authenticated/_administrators/administrators.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const administratorItemFragment = graphql(`
     fragment AdministratorItem on Administrator {

packages/dashboard/src/app/routes/_authenticated/_administrators/administrators.tsx

@@ -1,11 +1,11 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
-import { Badge } from '@/components/ui/badge.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 { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RoleCodeLabel } from '@/vdb/components/shared/role-code-label.js';
+import { Badge } from '@/vdb/components/ui/badge.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 { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { administratorListDocument, deleteAdministratorDocument } from './administrators.graphql.js';

packages/dashboard/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -1,10 +1,10 @@
-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 { RoleSelector } from '@/components/shared/role-selector.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.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 { RoleSelector } from '@/vdb/components/shared/role-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     Page,
@@ -13,10 +13,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 {

packages/dashboard/src/app/routes/_authenticated/_administrators/components/administrator-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteAdministratorsDocument } from '../administrators.graphql.js';
 

packages/dashboard/src/app/routes/_authenticated/_administrators/components/role-permissions-display.tsx

@@ -1,11 +1,11 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
-import { useLingui } from '@/lib/trans.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 
 const rolesByIdDocument = graphql(`
@@ -46,9 +46,9 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
 
     const roles = data?.roles.items ?? [];
 
-    const allChannels = roles.flatMap(role => role.channels).filter((channel, index, self) =>
-        index === self.findIndex((t) => t.code === channel.code),
-    );
+    const allChannels = roles
+        .flatMap(role => role.channels)
+        .filter((channel, index, self) => index === self.findIndex(t => t.code === channel.code));
 
     const isPermissionEnabled = (permissionName: string, channelCode: string) => {
         // Check if any role has this permission for this channel
@@ -87,7 +87,9 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
                                 {groupedPermissions.map((group, idx) => (
                                     <tr
                                         key={group.label}
-                                        className={idx !== groupedPermissions.length - 1 ? 'border-b' : undefined}
+                                        className={
+                                            idx !== groupedPermissions.length - 1 ? 'border-b' : undefined
+                                        }
                                     >
                                         <td className="p-4">
                                             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
@@ -106,9 +108,7 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
                                                         <TooltipProvider>
                                                             <Tooltip>
                                                                 <TooltipTrigger asChild>
-                                                                    <label
-                                                                        className="text-sm cursor-default"
-                                                                    >
+                                                                    <label className="text-sm cursor-default">
                                                                         {i18n.t(permission.name)}
                                                                     </label>
                                                                 </TooltipTrigger>

packages/dashboard/src/app/routes/_authenticated/_assets/assets.graphql.ts

@@ -1,5 +1,5 @@
-import { assetFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const assetDetailDocument = graphql(
     `

packages/dashboard/src/app/routes/_authenticated/_assets/assets.tsx

@@ -1,6 +1,6 @@
-import { AssetGallery } from '@/components/shared/asset/asset-gallery.js';
-import { Page, PageBlock, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { Trans } from '@/lib/trans.js';
+import { AssetGallery } from '@/vdb/components/shared/asset/asset-gallery.js';
+import { Page, PageBlock, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute } from '@tanstack/react-router';
 import { DeleteAssetsBulkAction } from './components/asset-bulk-actions.js';
 
@@ -15,11 +15,15 @@ function RouteComponent() {
                 <Trans>Assets</Trans>
             </PageTitle>
             <PageBlock blockId="asset-gallery" column="main">
-                <AssetGallery selectable={true} multiSelect="manual" bulkActions={[{
-                        order: 10,
-                        component: DeleteAssetsBulkAction,
-                    },
-                ]}
+                <AssetGallery
+                    selectable={true}
+                    multiSelect="manual"
+                    bulkActions={[
+                        {
+                            order: 10,
+                            component: DeleteAssetsBulkAction,
+                        },
+                    ]}
                 />
             </PageBlock>
         </Page>

packages/dashboard/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -1,13 +1,13 @@
-import { AssetFocalPointEditor } from '@/components/shared/asset/asset-focal-point-editor.js';
-import { AssetPreviewSelector } from '@/components/shared/asset/asset-preview-selector.js';
-import { PreviewPreset } from '@/components/shared/asset/asset-preview.js';
-import { AssetProperties } from '@/components/shared/asset/asset-properties.js';
-import { Point } from '@/components/shared/asset/focal-point-control.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Button } from '@/components/ui/button.js';
-import { Label } from '@/components/ui/label.js';
+import { AssetFocalPointEditor } from '@/vdb/components/shared/asset/asset-focal-point-editor.js';
+import { AssetPreviewSelector } from '@/vdb/components/shared/asset/asset-preview-selector.js';
+import { PreviewPreset } from '@/vdb/components/shared/asset/asset-preview.js';
+import { AssetProperties } from '@/vdb/components/shared/asset/asset-properties.js';
+import { Point } from '@/vdb/components/shared/asset/focal-point-control.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Label } from '@/vdb/components/ui/label.js';
 import {
     CustomFieldsPageBlock,
     Page,
@@ -16,10 +16,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 } from '@tanstack/react-router';
 import { FocusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';

packages/dashboard/src/app/routes/_authenticated/_assets/components/asset-bulk-actions.tsx

@@ -2,11 +2,11 @@ import { useMutation } from '@tanstack/react-query';
 import { TrashIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { api } from '@/graphql/api.js';
-import { AssetFragment } from '@/graphql/fragments.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/vdb/graphql/api.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { deleteAssetsDocument } from '../assets.graphql.js';
 
 export const DeleteAssetsBulkAction = ({

packages/dashboard/src/app/routes/_authenticated/_channels/channels.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const channelItemFragment = graphql(`
     fragment ChannelItem on Channel {

packages/dashboard/src/app/routes/_authenticated/_channels/channels.tsx

@@ -1,14 +1,14 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-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 { Trans } from '@/lib/trans.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+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 { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { channelListQuery, deleteChannelDocument } from './channels.graphql.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { DeleteChannelsBulkAction } from './components/channel-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_channels/channels')({
@@ -54,13 +54,13 @@ function ChannelListPage() {
                     header: 'Seller',
                     cell: ({ row }) => {
                         return row.original.seller?.name;
-                    }
+                    },
                 },
                 defaultLanguageCode: {
                     header: 'Default Language',
                     cell: ({ row }) => {
                         return formatLanguageName(row.original.defaultLanguageCode);
-                    }
+                    },
                 },
             }}
             bulkActions={[

packages/dashboard/src/app/routes/_authenticated/_channels/channels_.$id.tsx

@@ -1,15 +1,15 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { CurrencySelector } from '@/components/shared/currency-selector.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { LanguageSelector } from '@/components/shared/language-selector.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { SellerSelector } from '@/components/shared/seller-selector.js';
-import { ZoneSelector } from '@/components/shared/zone-selector.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { DEFAULT_CHANNEL_CODE, NEW_ENTITY_PATH } from '@/constants.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { CurrencySelector } from '@/vdb/components/shared/currency-selector.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { LanguageSelector } from '@/vdb/components/shared/language-selector.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { SellerSelector } from '@/vdb/components/shared/seller-selector.js';
+import { ZoneSelector } from '@/vdb/components/shared/zone-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { DEFAULT_CHANNEL_CODE, NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -19,10 +19,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 { channelDetailDocument, createChannelDocument, updateChannelDocument } from './channels.graphql.js';

packages/dashboard/src/app/routes/_authenticated/_channels/components/channel-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteChannelsDocument } from '../channels.graphql.js';
 

packages/dashboard/src/app/routes/_authenticated/_collections/collections.graphql.ts

@@ -1,10 +1,10 @@
-import { api } from '@/graphql/api.js';
+import { api } from '@/vdb/graphql/api.js';
 import {
     assetFragment,
     configurableOperationDefFragment,
     configurableOperationFragment,
-} from '@/graphql/fragments.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
+} from '@/vdb/graphql/fragments.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { DefinedInitialDataOptions, queryOptions } from '@tanstack/react-query';
 
 export const collectionListDocument = graphql(

packages/dashboard/src/app/routes/_authenticated/_collections/collections.tsx

@@ -1,10 +1,10 @@
-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 { 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';

packages/dashboard/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/richt-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 {

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

@@ -1,10 +1,10 @@
 import { useQueryClient } from '@tanstack/react-query';
 
-import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
-import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
-import { api } from '@/graphql/api.js';
-import { useChannel } from '@/index.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 { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {

packages/dashboard/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';
@@ -65,9 +65,8 @@ export function CollectionContentsPreviewTable({
                 <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>
 

packages/dashboard/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>

packages/dashboard/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,7 +24,6 @@ export const collectionContentsDocument = graphql(`
     }
 `);
 
-
 export interface CollectionContentsTableProps {
     collectionId?: string;
 }
@@ -34,11 +33,11 @@ export function CollectionContentsTable({ collectionId }: CollectionContentsTabl
     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>
                         );
                     },

packages/dashboard/src/app/routes/_authenticated/_collections/components/collection-filters-selector.tsx

@@ -1,14 +1,14 @@
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { Button } from '@/components/ui/button.js';
+import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.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 { ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { Plus } from 'lucide-react';

packages/dashboard/src/app/routes/_authenticated/_countries/components/country-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteCountriesDocument } from '../countries.graphql.js';
 

packages/dashboard/src/app/routes/_authenticated/_countries/countries.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const countryItemFragment = graphql(`
     fragment CountryItem on Country {

packages/dashboard/src/app/routes/_authenticated/_countries/countries.tsx

@@ -1,9 +1,9 @@
-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 { Trans } from '@/lib/trans.js';
+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 { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteCountriesBulkAction } from './components/country-bulk-actions.js';

packages/dashboard/src/app/routes/_authenticated/_countries/countries_.$id.tsx

@@ -1,11 +1,11 @@
-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 { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.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 { 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,
@@ -15,10 +15,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 { countryDetailDocument, createCountryDocument, updateCountryDocument } from './countries.graphql.js';

packages/dashboard/src/app/routes/_authenticated/_customer-groups/components/customer-group-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteCustomerGroupsDocument } from '../customer-groups.graphql.js';
 

packages/dashboard/src/app/routes/_authenticated/_customer-groups/components/customer-group-members-sheet.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Sheet,
     SheetContent,
@@ -5,11 +6,10 @@ import {
     SheetHeader,
     SheetTitle,
     SheetTrigger,
-} from '@/components/ui/sheet.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/sheet.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { PanelLeftOpen } from 'lucide-react';
 import { CustomerGroupMembersTable } from './customer-group-members-table.js';
-import { Button } from '@/components/ui/button.js';
 
 export interface CustomerGroupMembersSheetProps {
     customerGroupName: string;
@@ -17,7 +17,11 @@ export interface CustomerGroupMembersSheetProps {
     children?: React.ReactNode;
 }
 
-export function CustomerGroupMembersSheet({ customerGroupName, customerGroupId, children }: CustomerGroupMembersSheetProps) {
+export function CustomerGroupMembersSheet({
+    customerGroupName,
+    customerGroupId,
+    children,
+}: CustomerGroupMembersSheetProps) {
     return (
         <Sheet>
             <SheetTrigger asChild>
@@ -32,7 +36,10 @@ export function CustomerGroupMembersSheet({ customerGroupName, customerGroupId,
                         <Trans>Customer group members for {customerGroupName}</Trans>
                     </SheetTitle>
                     <SheetDescription>
-                        <Trans>These are the customers in the <strong>{customerGroupName}</strong> customer group.</Trans>
+                        <Trans>
+                            These are the customers in the <strong>{customerGroupName}</strong> customer
+                            group.
+                        </Trans>
                     </SheetDescription>
                 </SheetHeader>
                 <div className="px-4">

packages/dashboard/src/app/routes/_authenticated/_customer-groups/components/customer-group-members-table.tsx

@@ -1,17 +1,19 @@
-import { CustomerSelector } from '@/components/shared/customer-selector.js';
-import { PaginatedListDataTable, PaginatedListDataTableKey } 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 { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { CustomerSelector } from '@/vdb/components/shared/customer-selector.js';
+import {
+    PaginatedListDataTable,
+    PaginatedListDataTableKey,
+} 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 { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { addCustomerToGroupDocument } from '../../_customers/customers.graphql.js';
 import { toast } from 'sonner';
-import { useLingui } from '@/lib/trans.js';
+import { addCustomerToGroupDocument } from '../../_customers/customers.graphql.js';
 
 export const customerGroupMemberListDocument = graphql(`
     query CustomerGroupMemberList($id: ID!, $options: CustomerListOptions) {
@@ -36,7 +38,10 @@ export interface CustomerGroupMembersTableProps {
     canAddCustomers?: boolean;
 }
 
-export function CustomerGroupMembersTable({ customerGroupId, canAddCustomers = true }: CustomerGroupMembersTableProps) {
+export function CustomerGroupMembersTable({
+    customerGroupId,
+    canAddCustomers = true,
+}: CustomerGroupMembersTableProps) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
@@ -48,8 +53,8 @@ export function CustomerGroupMembersTable({ customerGroupId, canAddCustomers = t
         mutationFn: api.mutate(addCustomerToGroupDocument),
         onSuccess: () => {
             toast.success(i18n.t('Customer added to group'));
-            queryClient.invalidateQueries({ 
-                queryKey: [PaginatedListDataTableKey, customerGroupMemberListDocument] 
+            queryClient.invalidateQueries({
+                queryKey: [PaginatedListDataTableKey, customerGroupMemberListDocument],
             });
         },
         onError: () => {
@@ -117,10 +122,10 @@ export function CustomerGroupMembersTable({ customerGroupId, canAddCustomers = t
                 <CustomerSelector
                     onSelect={customer => {
                         addCustomerToGroup({
-                        customerId: customer.id,
-                        groupId: customerGroupId,
-                    });
-                }}
+                            customerId: customer.id,
+                            groupId: customerGroupId,
+                        });
+                    }}
                     label={<Trans>Add customer</Trans>}
                 />
             )}

packages/dashboard/src/app/routes/_authenticated/_customer-groups/customer-groups.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const customerGroupListDocument = graphql(`
     query CustomerGroupList($options: CustomerGroupListOptions) {

packages/dashboard/src/app/routes/_authenticated/_customer-groups/customer-groups.tsx

@@ -1,9 +1,9 @@
-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 { Trans } from '@/lib/trans.js';
+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 { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteCustomerGroupsBulkAction } from './components/customer-group-bulk-actions.js';

packages/dashboard/src/app/routes/_authenticated/_customer-groups/customer-groups_.$id.tsx

@@ -1,9 +1,9 @@
-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 { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.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 { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -13,10 +13,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 { CustomerGroupMembersTable } from './components/customer-group-members-table.js';

packages/dashboard/src/app/routes/_authenticated/_customers/components/customer-address-card.tsx

@@ -1,24 +1,27 @@
-import { ResultOf } from '@/graphql/graphql.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
 
-import { addressFragment, deleteCustomerAddressDocument, updateCustomerAddressDocument } from '../customers.graphql.js';
+import { ConfirmationDialog } from '@/vdb/components/shared/confirmation-dialog.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
 import {
-    DialogContent,
     Dialog,
-    DialogTrigger,
+    DialogContent,
+    DialogDescription,
     DialogHeader,
     DialogTitle,
-    DialogDescription,
-} from '@/components/ui/dialog.js';
-import { Trans } from '@/lib/trans.js';
-import { useLingui } from '@/lib/trans.js';
-import { AddressFormValues, CustomerAddressForm } from './customer-address-form.js';
+    DialogTrigger,
+} from '@/vdb/components/ui/dialog.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation } from '@tanstack/react-query';
 import { EditIcon, TrashIcon } from 'lucide-react';
 import { useState } from 'react';
-import { Badge } from '@/components/ui/badge.js';
-import { api } from '@/graphql/api.js';
-import { useMutation } from '@tanstack/react-query';
 import { toast } from 'sonner';
-import { ConfirmationDialog } from '@/components/shared/confirmation-dialog.js';
+import {
+    addressFragment,
+    deleteCustomerAddressDocument,
+    updateCustomerAddressDocument,
+} from '../customers.graphql.js';
+import { AddressFormValues, CustomerAddressForm } from './customer-address-form.js';
 
 export function CustomerAddressCard({
     address,
@@ -44,8 +47,8 @@ export function CustomerAddressCard({
         onError: () => {
             toast.error(i18n.t('Failed to delete address'));
         },
-    }); 
-    
+    });
+
     // Set up mutation for updating address
     const { mutate: updateAddress } = useMutation({
         mutationFn: api.mutate(updateCustomerAddressDocument),
@@ -129,10 +132,7 @@ export function CustomerAddressCard({
                                         <Trans>Edit the address details below.</Trans>
                                     </DialogDescription>
                                 </DialogHeader>
-                                <CustomerAddressForm
-                                    address={address}
-                                    onSubmit={onSubmit}
-                                />
+                                <CustomerAddressForm address={address} onSubmit={onSubmit} />
                             </DialogContent>
                         </Dialog>
                     )}

packages/dashboard/src/app/routes/_authenticated/_customers/components/customer-address-form.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/components/ui/button.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
 import {
     Form,
     FormControl,
@@ -8,15 +8,15 @@ import {
     FormItem,
     FormLabel,
     FormMessage,
-} from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
+} from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { ControllerRenderProps, FieldPath, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { addressFragment } from '../customers.graphql.js';
 

packages/dashboard/src/app/routes/_authenticated/_customers/components/customer-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteCustomersDocument } from '../customers.graphql.js';
 

packages/dashboard/src/app/routes/_authenticated/_customers/components/customer-history/customer-history-container.tsx

@@ -1,10 +1,10 @@
-import { Alert, AlertDescription } from '@/components/ui/alert.js';
-import { Skeleton } from '@/components/ui/skeleton.js';
-import { Trans } from '@/lib/trans.js';
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Skeleton } from '@/vdb/components/ui/skeleton.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { TriangleAlert } from 'lucide-react';
 import { CustomerHistory } from './customer-history.js';
 import { useCustomerHistory } from './use-customer-history.js';
-import { Button } from '@/components/ui/button.js';
 
 interface CustomerHistoryContainerProps {
     customerId: string;

packages/dashboard/src/app/routes/_authenticated/_customers/components/customer-history/customer-history.tsx

@@ -1,8 +1,8 @@
-import { HistoryEntry, HistoryEntryItem } from '@/components/shared/history-timeline/history-entry.js';
-import { HistoryNoteInput } from '@/components/shared/history-timeline/history-note-input.js';
-import { HistoryTimeline } from '@/components/shared/history-timeline/history-timeline.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Trans } from '@/lib/trans.js';
+import { HistoryEntry, HistoryEntryItem } from '@/vdb/components/shared/history-timeline/history-entry.js';
+import { HistoryNoteInput } from '@/vdb/components/shared/history-timeline/history-note-input.js';
+import { HistoryTimeline } from '@/vdb/components/shared/history-timeline/history-timeline.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { CheckIcon, SquarePen } from 'lucide-react';
 
 interface CustomerHistoryProps {
@@ -15,7 +15,12 @@ interface CustomerHistoryProps {
     onDeleteNote?: (entryId: string) => void;
 }
 
-export function CustomerHistory({ historyEntries, onAddNote, onUpdateNote, onDeleteNote }: CustomerHistoryProps) {
+export function CustomerHistory({
+    historyEntries,
+    onAddNote,
+    onUpdateNote,
+    onDeleteNote,
+}: CustomerHistoryProps) {
     const getTimelineIcon = (entry: CustomerHistoryProps['historyEntries'][0]) => {
         switch (entry.type) {
             case 'CUSTOMER_NOTE':
@@ -70,7 +75,6 @@ export function CustomerHistory({ historyEntries, onAddNote, onUpdateNote, onDel
                         </div>
                     </HistoryEntry>
                 ))}
-                
             </HistoryTimeline>
         </div>
     );

packages/dashboard/src/app/routes/_authenticated/_customers/components/customer-history/use-customer-history.ts

@@ -1,7 +1,7 @@
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
-import { useLingui } from '@/lib/trans.js';
-import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';
 

packages/dashboard/src/app/routes/_authenticated/_customers/components/customer-order-table.tsx

@@ -1,11 +1,11 @@
-import { Money } from "@/components/data-display/money.js";
-import { PaginatedListDataTable } from "@/components/shared/paginated-list-data-table.js";
-import { Badge } from "@/components/ui/badge.js";
-import { Button } from "@/components/ui/button.js";
-import { Link } from "@tanstack/react-router";
-import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
-import { useState } from "react";
-import { customerOrderListDocument } from "../customers.graphql.js";
+import { Money } from '@/vdb/components/data-display/money.js';
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { customerOrderListDocument } from '../customers.graphql.js';
 
 interface CustomerOrderTableProps {
     customerId: string;
@@ -17,72 +17,74 @@ export function CustomerOrderTable({ customerId }: CustomerOrderTableProps) {
     const [sorting, setSorting] = useState<SortingState>([{ id: 'orderPlacedAt', desc: true }]);
     const [filters, setFilters] = useState<ColumnFiltersState>([]);
 
-    return <PaginatedListDataTable
-        listQuery={customerOrderListDocument}
-        transformVariables={variables => {
-            return {
-                ...variables,
-                customerId,
-            };
-        }}
-        defaultVisibility={{
-            id: false,
-            createdAt: false,
-            updatedAt: false,
-            type: false,
-            currencyCode: false,
-            total: false,
-        }}
-        customizeColumns={{
-            total: {
-                header: 'Total',
-                cell: ({ cell, row }) => {
-                    const value = cell.getValue();
-                    const currencyCode = row.original.currencyCode;
-                    return <Money value={value} currencyCode={currencyCode} />;
+    return (
+        <PaginatedListDataTable
+            listQuery={customerOrderListDocument}
+            transformVariables={variables => {
+                return {
+                    ...variables,
+                    customerId,
+                };
+            }}
+            defaultVisibility={{
+                id: false,
+                createdAt: false,
+                updatedAt: false,
+                type: false,
+                currencyCode: false,
+                total: false,
+            }}
+            customizeColumns={{
+                total: {
+                    header: 'Total',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        const currencyCode = row.original.currencyCode;
+                        return <Money value={value} currencyCode={currencyCode} />;
+                    },
                 },
-            },
-            totalWithTax: {
-                header: 'Total with Tax',
-                cell: ({ cell, row }) => {
-                    const value = cell.getValue();
-                    const currencyCode = row.original.currencyCode;
-                    return <Money value={value} currencyCode={currencyCode} />;
+                totalWithTax: {
+                    header: 'Total with Tax',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        const currencyCode = row.original.currencyCode;
+                        return <Money value={value} currencyCode={currencyCode} />;
+                    },
                 },
-            },
-            state: {
-                header: 'State',
-                cell: ({ cell }) => {
-                    const value = cell.getValue() as string;
-                    return <Badge variant="outline">{value}</Badge>;
+                state: {
+                    header: 'State',
+                    cell: ({ cell }) => {
+                        const value = cell.getValue() as string;
+                        return <Badge variant="outline">{value}</Badge>;
+                    },
                 },
-            },
-            code: {
-                header: 'Code',
-                cell: ({ cell, row }) => {
-                    const value = cell.getValue() as string;
-                    const id = row.original.id;
-                    return (
-                        <Button asChild variant="ghost">
-                            <Link to={`/orders/${id}`}>{value}</Link>
-                        </Button>
-                    );
+                code: {
+                    header: 'Code',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue() as string;
+                        const id = row.original.id;
+                        return (
+                            <Button asChild variant="ghost">
+                                <Link to={`/orders/${id}`}>{value}</Link>
+                            </Button>
+                        );
+                    },
                 },
-            },
-        }}
-        page={page}
-        itemsPerPage={pageSize}
-        sorting={sorting}
-        columnFilters={filters}
-        onPageChange={(_, page, perPage) => {
-            setPage(page);
-            setPageSize(perPage);
-        }}
-        onSortChange={(_, sorting) => {
-            setSorting(sorting);
-        }}
-        onFilterChange={(_, filters) => {
-            setFilters(filters);
-        }}
-    />;
+            }}
+            page={page}
+            itemsPerPage={pageSize}
+            sorting={sorting}
+            columnFilters={filters}
+            onPageChange={(_, page, perPage) => {
+                setPage(page);
+                setPageSize(perPage);
+            }}
+            onSortChange={(_, sorting) => {
+                setSorting(sorting);
+            }}
+            onFilterChange={(_, filters) => {
+                setFilters(filters);
+            }}
+        />
+    );
 }

packages/dashboard/src/app/routes/_authenticated/_customers/components/customer-status-badge.tsx

@@ -1,6 +1,6 @@
-import { Badge } from '@/components/ui/badge.js';
-import { BadgeX, BadgeCheck } from 'lucide-react';
-import { Trans } from '@/lib/trans.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { BadgeCheck, BadgeX } from 'lucide-react';
 
 export type CustomerStatus = 'guest' | 'registered' | 'verified';
 

packages/dashboard/src/app/routes/_authenticated/_customers/customers.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const customerListDocument = graphql(`
     query GetCustomerList($options: CustomerListOptions) {

packages/dashboard/src/app/routes/_authenticated/_customers/customers.tsx

@@ -1,9 +1,9 @@
-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 { Trans } from '@/lib/trans.js';
+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 { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteCustomersBulkAction } from './components/customer-bulk-actions.js';

packages/dashboard/src/app/routes/_authenticated/_customers/customers_.$id.tsx

@@ -1,9 +1,9 @@
-import { CustomerGroupChip } from '@/components/shared/customer-group-chip.js';
-import { CustomerGroupSelector } from '@/components/shared/customer-group-selector.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 { Button } from '@/components/ui/button.js';
+import { CustomerGroupChip } from '@/vdb/components/shared/customer-group-chip.js';
+import { CustomerGroupSelector } from '@/vdb/components/shared/customer-group-selector.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 { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -11,9 +11,9 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -23,11 +23,11 @@ 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 { api } from '@/graphql/api.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 { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Plus } from 'lucide-react';

packages/dashboard/src/app/routes/_authenticated/_facets/components/edit-facet-value.tsx

@@ -1,11 +1,11 @@
-import { usePaginatedList } from '@/components/shared/paginated-list-data-table.js';
-import { Button } from '@/components/ui/button.js';
-import { Form, FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form, FormControl, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 

packages/dashboard/src/app/routes/_authenticated/_facets/components/facet-bulk-actions.tsx

@@ -1,12 +1,12 @@
 import { toast } from 'sonner';
 
-import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
-import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
-import { api } from '@/graphql/api.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { useChannel } from '@/index.js';
-import { useLingui } from '@/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 { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/index.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 

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

@@ -1,3 +1,4 @@
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Sheet,
     SheetContent,
@@ -5,11 +6,10 @@ import {
     SheetHeader,
     SheetTitle,
     SheetTrigger,
-} from '@/components/ui/sheet.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/sheet.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { PanelLeftOpen } from 'lucide-react';
 import { FacetValuesTable } from './facet-values-table.js';
-import { Button } from '@/components/ui/button.js';
 
 export interface FacetValuesSheetProps {
     facetName: string;

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

@@ -1,9 +1,9 @@
-import { PaginatedListDataTable } from '@/components/shared/paginated-list-data-table.js';
-import { Button } from '@/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
 import { EditFacetValue } from './edit-facet-value.js';
@@ -24,7 +24,6 @@ export const facetValueListDocument = graphql(`
     }
 `);
 
-
 export interface FacetValuesTableProps {
     facetId: string;
 }
@@ -34,7 +33,7 @@ export function FacetValuesTable({ facetId }: FacetValuesTableProps) {
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [filters, setFilters] = useState<ColumnFiltersState>([]);
-    
+
     return (
         <PaginatedListDataTable
             listQuery={addCustomFields(facetValueListDocument)}
@@ -82,10 +81,15 @@ export function FacetValuesTable({ facetId }: FacetValuesTableProps) {
                         return (
                             <Popover open={open} onOpenChange={setOpen}>
                                 <PopoverTrigger asChild>
-                                    <Button type="button" variant="outline" size="sm"><Trans>Edit</Trans></Button>
+                                    <Button type="button" variant="outline" size="sm">
+                                        <Trans>Edit</Trans>
+                                    </Button>
                                 </PopoverTrigger>
                                 <PopoverContent className="w-80">
-                                    <EditFacetValue facetValueId={facetValue.id} onSuccess={() => setOpen(false)} />
+                                    <EditFacetValue
+                                        facetValueId={facetValue.id}
+                                        onSuccess={() => setOpen(false)}
+                                    />
                                 </PopoverContent>
                             </Popover>
                         );

packages/dashboard/src/app/routes/_authenticated/_facets/facets.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const facetValueFragment = graphql(`
     fragment FacetValue on FacetValue {

packages/dashboard/src/app/routes/_authenticated/_facets/facets.tsx

@@ -1,10 +1,10 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { FacetValueChip } from '@/components/shared/facet-value-chip.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 { Trans } from '@/lib/trans.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';
+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 { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
 import { PlusIcon } from 'lucide-react';

packages/dashboard/src/app/routes/_authenticated/_facets/facets_.$id.tsx

@@ -1,11 +1,11 @@
-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 { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.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 { 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,
@@ -15,10 +15,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 { FacetValuesTable } from './components/facet-values-table.js';

packages/dashboard/src/app/routes/_authenticated/_global-settings/global-settings.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const globalSettingsDocument = graphql(`
     query GlobalSettings {

packages/dashboard/src/app/routes/_authenticated/_global-settings/global-settings.tsx

@@ -1,11 +1,11 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { LanguageSelector } from '@/components/shared/language-selector.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { LanguageSelector } from '@/vdb/components/shared/language-selector.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.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,
@@ -15,10 +15,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { api } from '@/graphql/api.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { globalSettingsDocument, updateGlobalSettingsDocument } from './global-settings.graphql.js';

packages/dashboard/src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx

@@ -1,15 +1,14 @@
-import { Button } from '@/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Card } from '@/vdb/components/ui/card.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { useQuery } from '@tanstack/react-query';
-import { Trans } from '@/lib/trans.js';
-import { useLingui } from '@/lib/trans.js';
-import { addressFragment } from '../../_customers/customers.graphql.js';
-import { Card } from '@/components/ui/card.js';
-import { cn } from '@/lib/utils.js';
-import { useState } from 'react';
 import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { addressFragment } from '../../_customers/customers.graphql.js';
 
 const getCustomerAddressesDocument = graphql(
     `
@@ -72,9 +71,7 @@ export function CustomerAddressSelector({ customerId, onSelect }: CustomerAddres
                             addresses.map(address => (
                                 <Card
                                     key={address.id}
-                                    className={cn(
-                                        'p-4 cursor-pointer hover:bg-accent transition-colors',
-                                    )}
+                                    className={cn('p-4 cursor-pointer hover:bg-accent transition-colors')}
                                     onClick={() => {
                                         onSelect(address);
                                         setOpen(false);

packages/dashboard/src/app/routes/_authenticated/_orders/components/edit-order-table.tsx

@@ -1,10 +1,10 @@
-import { ProductVariantSelector } from '@/components/shared/product-variant-selector.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { ProductVariantSelector } from '@/vdb/components/shared/product-variant-selector.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import {
     ColumnDef,
     flexRender,
@@ -14,22 +14,28 @@ import {
 } from '@tanstack/react-table';
 import { Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { draftOrderEligibleShippingMethodsDocument, orderDetailDocument, orderLineFragment } from '../orders.graphql.js';
+import { UseFormReturn } from 'react-hook-form';
+import {
+    draftOrderEligibleShippingMethodsDocument,
+    orderDetailDocument,
+    orderLineFragment,
+} from '../orders.graphql.js';
 import { MoneyGrossNet } from './money-gross-net.js';
+import { OrderLineCustomFieldsForm } from './order-line-custom-fields-form.js';
 import { OrderTableTotals } from './order-table-totals.js';
 import { ShippingMethodSelector } from './shipping-method-selector.js';
-import { OrderLineCustomFieldsForm } from './order-line-custom-fields-form.js';
-import { UseFormReturn } from 'react-hook-form';
 
 type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
 type OrderLineFragment = ResultOf<typeof orderLineFragment>;
 
-type ShippingMethodQuote = ResultOf<typeof draftOrderEligibleShippingMethodsDocument>['eligibleShippingMethodsForDraftOrder'][number];
+type ShippingMethodQuote = ResultOf<
+    typeof draftOrderEligibleShippingMethodsDocument
+>['eligibleShippingMethodsForDraftOrder'][number];
 
 export interface OrderTableProps {
     order: OrderFragment;
     eligibleShippingMethods: ShippingMethodQuote[];
-    onAddItem: (event: { productVariantId: string; }) => void;
+    onAddItem: (event: { productVariantId: string }) => void;
     onAdjustLine: (event: { lineId: string; quantity: number; customFields: Record<string, any> }) => void;
     onRemoveLine: (event: { lineId: string }) => void;
     onSetShippingMethod: (event: { shippingMethodId: string }) => void;
@@ -38,9 +44,17 @@ export interface OrderTableProps {
     orderLineForm: UseFormReturn<any>;
 }
 
-export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAdjustLine, onRemoveLine,
-    onSetShippingMethod, onApplyCouponCode, onRemoveCouponCode, orderLineForm }: OrderTableProps) {
-
+export function EditOrderTable({
+    order,
+    eligibleShippingMethods,
+    onAddItem,
+    onAdjustLine,
+    onRemoveLine,
+    onSetShippingMethod,
+    onApplyCouponCode,
+    onRemoveCouponCode,
+    orderLineForm,
+}: OrderTableProps) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
     const [couponCode, setCouponCode] = useState('');
 
@@ -67,30 +81,50 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
             header: 'Unit price',
             accessorKey: 'unitPriceWithTax',
             cell: ({ row }) => {
-                const value = row.original.unitPriceWithTax
+                const value = row.original.unitPriceWithTax;
                 const netValue = row.original.unitPrice;
-                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />
+                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
             },
         },
         {
             header: 'Quantity',
             accessorKey: 'quantity',
             cell: ({ row }) => {
-                return <div className="flex gap-2">
-                    <Input type="number" value={row.original.quantity} onChange={e => onAdjustLine({ lineId: row.original.id, quantity: e.target.valueAsNumber, customFields: row.original.customFields })} />
-                    <Button variant="outline" type="button" size="icon" onClick={() => onRemoveLine({ lineId: row.original.id })}>
-                        <Trash2 />
-                    </Button>
-                    {row.original.customFields &&
-                        <OrderLineCustomFieldsForm onUpdate={(customFields) => {
-                            
-                            onAdjustLine({
-                                lineId: row.original.id,
-                                quantity: row.original.quantity,
-                                customFields: customFields
-                            });
-                        }} form={orderLineForm} />}
-                </div>;
+                return (
+                    <div className="flex gap-2">
+                        <Input
+                            type="number"
+                            value={row.original.quantity}
+                            onChange={e =>
+                                onAdjustLine({
+                                    lineId: row.original.id,
+                                    quantity: e.target.valueAsNumber,
+                                    customFields: row.original.customFields,
+                                })
+                            }
+                        />
+                        <Button
+                            variant="outline"
+                            type="button"
+                            size="icon"
+                            onClick={() => onRemoveLine({ lineId: row.original.id })}
+                        >
+                            <Trash2 />
+                        </Button>
+                        {row.original.customFields && (
+                            <OrderLineCustomFieldsForm
+                                onUpdate={customFields => {
+                                    onAdjustLine({
+                                        lineId: row.original.id,
+                                        quantity: row.original.quantity,
+                                        customFields: customFields,
+                                    });
+                                }}
+                                form={orderLineForm}
+                            />
+                        )}
+                    </div>
+                );
             },
         },
         {
@@ -130,9 +164,9 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext(),
-                                                )}
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
                                         </TableHead>
                                     );
                                 })}
@@ -140,24 +174,26 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                         ))}
                     </TableHeader>
                     <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map(row => (
-                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                                    {row.getVisibleCells().map(cell => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : null}
+                        {table.getRowModel().rows?.length
+                            ? table.getRowModel().rows.map(row => (
+                                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                      {row.getVisibleCells().map(cell => (
+                                          <TableCell key={cell.id}>
+                                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                          </TableCell>
+                                      ))}
+                                  </TableRow>
+                              ))
+                            : null}
                         <TableRow>
                             <TableCell colSpan={columns.length} className="h-12">
                                 <div className="my-4 flex justify-center">
                                     <div className="max-w-lg">
-                                        <ProductVariantSelector onProductVariantIdChange={variantId => {
-                                            onAddItem({ productVariantId: variantId });
-                                        }} />
+                                        <ProductVariantSelector
+                                            onProductVariantIdChange={variantId => {
+                                                onAddItem({ productVariantId: variantId });
+                                            }}
+                                        />
                                     </div>
                                 </div>
                             </TableCell>
@@ -168,7 +204,7 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                     eligibleShippingMethods={eligibleShippingMethods}
                                     selectedShippingMethodId={order.shippingLines?.[0]?.shippingMethod?.id}
                                     currencyCode={currencyCode}
-                                    onSelect={(shippingMethodId) => onSetShippingMethod({ shippingMethodId })}
+                                    onSelect={shippingMethodId => onSetShippingMethod({ shippingMethodId })}
                                 />
                             </TableCell>
                         </TableRow>
@@ -180,8 +216,8 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                             type="text"
                                             placeholder="Coupon code"
                                             value={couponCode}
-                                            onChange={(e) => setCouponCode(e.target.value)}
-                                            onKeyDown={(e) => {
+                                            onChange={e => setCouponCode(e.target.value)}
+                                            onKeyDown={e => {
                                                 if (e.key === 'Enter') {
                                                     onApplyCouponCode({ couponCode });
                                                 }
@@ -197,7 +233,7 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                     </div>
                                     {order.couponCodes?.length > 0 && (
                                         <div className="flex flex-wrap gap-2">
-                                            {order.couponCodes.map((code) => (
+                                            {order.couponCodes.map(code => (
                                                 <div
                                                     key={code}
                                                     className="flex items-center gap-2 px-3 py-1 text-sm border rounded-md"
@@ -208,7 +244,9 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                                         variant="ghost"
                                                         size="sm"
                                                         className="h-6 w-6 p-0"
-                                                        onClick={() => onRemoveCouponCode({ couponCode: code })}
+                                                        onClick={() =>
+                                                            onRemoveCouponCode({ couponCode: code })
+                                                        }
                                                     >
                                                         <Trash2 className="h-4 w-4" />
                                                     </Button>

packages/dashboard/src/app/routes/_authenticated/_orders/components/money-gross-net.tsx

@@ -1,4 +1,4 @@
-import { Money } from "@/components/data-display/money.js";
+import { Money } from '@/vdb/components/data-display/money.js';
 
 export interface MoneyGrossNetProps {
     priceWithTax: number;
@@ -7,12 +7,14 @@ export interface MoneyGrossNetProps {
 }
 
 export function MoneyGrossNet({ priceWithTax, price, currencyCode }: MoneyGrossNetProps) {
-    return   <div className="flex flex-col gap-1">
-        <div>
-            <Money value={priceWithTax} currencyCode={currencyCode} />
+    return (
+        <div className="flex flex-col gap-1">
+            <div>
+                <Money value={priceWithTax} currencyCode={currencyCode} />
+            </div>
+            <div className="text-xs text-muted-foreground">
+                <Money value={price} currencyCode={currencyCode} />
+            </div>
         </div>
-        <div className="text-xs text-muted-foreground">
-            <Money value={price} currencyCode={currencyCode} />
-        </div>
-    </div>;
+    );
 }

packages/dashboard/src/app/routes/_authenticated/_orders/components/order-address.tsx

@@ -1,8 +1,7 @@
+import { Separator } from '@/vdb/components/ui/separator.js';
 import { ResultOf } from 'gql.tada';
+import { Globe, Phone } from 'lucide-react';
 import { orderAddressFragment } from '../orders.graphql.js';
-import { Phone } from 'lucide-react';
-import { Separator } from '@/components/ui/separator.js';
-import { Globe } from 'lucide-react';
 
 type OrderAddress = ResultOf<typeof orderAddressFragment>;
 

packages/dashboard/src/app/routes/_authenticated/_orders/components/order-history/order-history-container.tsx

@@ -1,73 +1,78 @@
-import { Alert, AlertDescription } from '@/components/ui/alert.js';
-import { Skeleton } from '@/components/ui/skeleton.js';
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Skeleton } from '@/vdb/components/ui/skeleton.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { TriangleAlert } from 'lucide-react';
 import { OrderHistory } from './order-history.js';
 import { useOrderHistory } from './use-order-history.js';
-import { Trans } from '@/lib/trans.js';
-import { Button } from '@/components/ui/button.js';
+
 interface OrderHistoryContainerProps {
-  orderId: string;
+    orderId: string;
 }
 
 export function OrderHistoryContainer({ orderId }: OrderHistoryContainerProps) {
-  const { 
-    historyEntries, 
-    order, 
-    loading, 
-    error, 
-    addNote, 
-    updateNote, 
-    deleteNote,
-    fetchNextPage,
-    hasNextPage,
-  } = useOrderHistory({ orderId, pageSize: 10 });
+    const {
+        historyEntries,
+        order,
+        loading,
+        error,
+        addNote,
+        updateNote,
+        deleteNote,
+        fetchNextPage,
+        hasNextPage,
+    } = useOrderHistory({ orderId, pageSize: 10 });
 
-  if (loading && !order) {
-    return (
-      <div className="space-y-4">
-        <h2 className="text-xl font-semibold"><Trans>Order history</Trans></h2>
-        <div className="space-y-2">
-          <Skeleton className="h-20 w-full" />
-          <Skeleton className="h-24 w-full" />
-          <Skeleton className="h-24 w-full" />
-        </div>
-      </div>
-    );
-  }
+    if (loading && !order) {
+        return (
+            <div className="space-y-4">
+                <h2 className="text-xl font-semibold">
+                    <Trans>Order history</Trans>
+                </h2>
+                <div className="space-y-2">
+                    <Skeleton className="h-20 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                </div>
+            </div>
+        );
+    }
 
-  if (error) {
-    return (
-      <Alert variant="destructive">
-        <TriangleAlert className="h-4 w-4" />
-        <AlertDescription>
-          <Trans>Error loading order history: {error.message}</Trans>
-        </AlertDescription>
-      </Alert>
-    );
-  }
+    if (error) {
+        return (
+            <Alert variant="destructive">
+                <TriangleAlert className="h-4 w-4" />
+                <AlertDescription>
+                    <Trans>Error loading order history: {error.message}</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (!order) {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <Trans>Order not found</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
 
-  if (!order) {
     return (
-      <Alert>
-        <AlertDescription><Trans>Order not found</Trans></AlertDescription>
-      </Alert>
+        <>
+            <OrderHistory
+                order={order}
+                historyEntries={historyEntries ?? []}
+                onAddNote={addNote}
+                onUpdateNote={updateNote}
+                onDeleteNote={deleteNote}
+            />
+            {hasNextPage && (
+                <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
+                    <Trans>Load more</Trans>
+                </Button>
+            )}
+        </>
     );
-  }
-
-  return (
-    <>
-      <OrderHistory
-        order={order}
-        historyEntries={historyEntries ?? []}
-        onAddNote={addNote}
-        onUpdateNote={updateNote}
-        onDeleteNote={deleteNote}
-      />
-      {hasNextPage && (
-        <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
-          <Trans>Load more</Trans>
-        </Button>
-      )}
-    </>
-  );
-} 
+}

packages/dashboard/src/app/routes/_authenticated/_orders/components/order-history/order-history.tsx

@@ -1,9 +1,9 @@
-import { Badge } from '@/components/ui/badge.js';
-import { Trans } from '@/lib/trans.js';
+import { HistoryEntry, HistoryEntryItem } from '@/vdb/components/shared/history-timeline/history-entry.js';
+import { HistoryNoteInput } from '@/vdb/components/shared/history-timeline/history-note-input.js';
+import { HistoryTimeline } from '@/vdb/components/shared/history-timeline/history-timeline.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { ArrowRightToLine, CheckIcon, CreditCardIcon, SquarePen } from 'lucide-react';
-import { HistoryEntry, HistoryEntryItem } from '@/components/shared/history-timeline/history-entry.js';
-import { HistoryNoteInput } from '@/components/shared/history-timeline/history-note-input.js';
-import { HistoryTimeline } from '@/components/shared/history-timeline/history-timeline.js';
 
 interface OrderHistoryProps {
     order: {

packages/dashboard/src/app/routes/_authenticated/_orders/components/order-history/use-order-history.ts

@@ -1,7 +1,7 @@
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
-import { useLingui } from '@/lib/trans.js';
-import { useMutation, useInfiniteQuery } from '@tanstack/react-query';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';
 

packages/dashboard/src/app/routes/_authenticated/_orders/components/order-line-custom-fields-form.tsx

@@ -1,9 +1,9 @@
-import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
-import { Button } from '@/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { Settings2 } from 'lucide-react';
 import { UseFormReturn } from 'react-hook-form';
-import { Form } from '@/components/ui/form.js';
 
 interface OrderLineCustomFieldsFormProps {
     onUpdate: (customFieldValues: Record<string, any>) => void;
@@ -14,7 +14,7 @@ export function OrderLineCustomFieldsForm({ onUpdate, form }: OrderLineCustomFie
     const onSubmit = (values: any) => {
         onUpdate(values.input?.customFields);
     };
-    
+
     return (
         <Popover>
             <PopoverTrigger asChild>
@@ -26,7 +26,11 @@ export function OrderLineCustomFieldsForm({ onUpdate, form }: OrderLineCustomFie
                 <Form {...form}>
                     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                         <h4 className="font-medium leading-none">Custom Fields</h4>
-                        <CustomFieldsForm entityType="OrderLine" control={form.control} formPathPrefix='input' />
+                        <CustomFieldsForm
+                            entityType="OrderLine"
+                            control={form.control}
+                            formPathPrefix="input"
+                        />
                         <Button type="submit" className="w-full" disabled={!form.formState.isValid}>
                             Update
                         </Button>

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

@@ -1,8 +1,8 @@
-import { ResultOf } from "@/graphql/graphql.js";
-import { orderDetailDocument } from "../orders.graphql.js";
-import { TableRow, TableCell } from "@/components/ui/table.js";
-import { MoneyGrossNet } from "./money-gross-net.js";
-import { Trans } from "@/lib/trans.js";
+import { TableCell, TableRow } from '@/vdb/components/ui/table.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { orderDetailDocument } from '../orders.graphql.js';
+import { MoneyGrossNet } from './money-gross-net.js';
 
 type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
 
@@ -16,20 +16,32 @@ export function OrderTableTotals({ order, columnCount }: OrderTableTotalsProps)
 
     return (
         <>
-            {order.discounts?.length > 0 ? order.discounts.map(discount => <TableRow>
-                <TableCell colSpan={columnCount - 1} className="h-12">
-                    <Trans>Discount</Trans>: {discount.description}
-                </TableCell>
-                <TableCell colSpan={1} className="h-12">
-                    <MoneyGrossNet priceWithTax={discount.amountWithTax} price={discount.amount} currencyCode={currencyCode} />
-                </TableCell>
-            </TableRow>) : null}
+            {order.discounts?.length > 0
+                ? order.discounts.map(discount => (
+                      <TableRow>
+                          <TableCell colSpan={columnCount - 1} className="h-12">
+                              <Trans>Discount</Trans>: {discount.description}
+                          </TableCell>
+                          <TableCell colSpan={1} className="h-12">
+                              <MoneyGrossNet
+                                  priceWithTax={discount.amountWithTax}
+                                  price={discount.amount}
+                                  currencyCode={currencyCode}
+                              />
+                          </TableCell>
+                      </TableRow>
+                  ))
+                : null}
             <TableRow>
                 <TableCell colSpan={columnCount - 1} className="h-12">
                     <Trans>Sub total</Trans>
                 </TableCell>
                 <TableCell colSpan={1} className="h-12">
-                    <MoneyGrossNet priceWithTax={order.subTotalWithTax} price={order.subTotal} currencyCode={currencyCode} />
+                    <MoneyGrossNet
+                        priceWithTax={order.subTotalWithTax}
+                        price={order.subTotal}
+                        currencyCode={currencyCode}
+                    />
                 </TableCell>
             </TableRow>
             <TableRow>
@@ -37,7 +49,11 @@ export function OrderTableTotals({ order, columnCount }: OrderTableTotalsProps)
                     <Trans>Shipping</Trans>
                 </TableCell>
                 <TableCell colSpan={1} className="h-12">
-                    <MoneyGrossNet priceWithTax={order.shippingWithTax} price={order.shipping} currencyCode={currencyCode} />
+                    <MoneyGrossNet
+                        priceWithTax={order.shippingWithTax}
+                        price={order.shipping}
+                        currencyCode={currencyCode}
+                    />
                 </TableCell>
             </TableRow>
             <TableRow>
@@ -45,9 +61,13 @@ export function OrderTableTotals({ order, columnCount }: OrderTableTotalsProps)
                     <Trans>Total</Trans>
                 </TableCell>
                 <TableCell colSpan={1} className="h-12 font-bold">
-                    <MoneyGrossNet priceWithTax={order.totalWithTax} price={order.total} currencyCode={currencyCode} />
+                    <MoneyGrossNet
+                        priceWithTax={order.totalWithTax}
+                        price={order.total}
+                        currencyCode={currencyCode}
+                    />
                 </TableCell>
             </TableRow>
         </>
-    )
-}
+    );
+}

packages/dashboard/src/app/routes/_authenticated/_orders/components/order-table.tsx

@@ -1,6 +1,6 @@
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
-import { ResultOf } from '@/graphql/graphql.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
 import {
     ColumnDef,
     flexRender,

packages/dashboard/src/app/routes/_authenticated/_orders/components/order-tax-summary.tsx

@@ -1,39 +1,41 @@
-import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table.js";
-import { Trans } from "@/lib/trans";
-import { orderDetailFragment } from "../orders.graphql.js";
-import { ResultOf } from "gql.tada";
-import { useLocalFormat } from "@/hooks/use-local-format.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans';
+import { ResultOf } from 'gql.tada';
+import { orderDetailFragment } from '../orders.graphql.js';
 
 export function OrderTaxSummary({ order }: { order: ResultOf<typeof orderDetailFragment> }) {
     const { formatCurrency } = useLocalFormat();
-    return <div>
-        <Table>
-            <TableHeader>
-                <TableRow>
-                    <TableHead>
-                        <Trans>Description</Trans>
-                    </TableHead>
-                    <TableHead>
-                        <Trans>Tax rate</Trans>
-                    </TableHead>
-                    <TableHead>
-                        <Trans>Tax base</Trans>
-                    </TableHead>
-                    <TableHead>
-                        <Trans>Tax total</Trans>
-                    </TableHead>
-                </TableRow>
-            </TableHeader>
-            <TableBody>
-                {order.taxSummary.map(taxLine => (
-                    <TableRow key={taxLine.description}>
-                        <TableCell>{taxLine.description}</TableCell>
-                        <TableCell>{taxLine.taxRate}%</TableCell>
-                        <TableCell>{formatCurrency(taxLine.taxBase, order.currencyCode)}</TableCell>
-                        <TableCell>{formatCurrency(taxLine.taxTotal, order.currencyCode)}</TableCell>
+    return (
+        <div>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>
+                            <Trans>Description</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax rate</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax base</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax total</Trans>
+                        </TableHead>
                     </TableRow>
-                ))}
-            </TableBody>
-        </Table>
-    </div>
-}
+                </TableHeader>
+                <TableBody>
+                    {order.taxSummary.map(taxLine => (
+                        <TableRow key={taxLine.description}>
+                            <TableCell>{taxLine.description}</TableCell>
+                            <TableCell>{taxLine.taxRate}%</TableCell>
+                            <TableCell>{formatCurrency(taxLine.taxBase, order.currencyCode)}</TableCell>
+                            <TableCell>{formatCurrency(taxLine.taxTotal, order.currencyCode)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}

packages/dashboard/src/app/routes/_authenticated/_orders/components/payment-details.tsx

@@ -1,6 +1,6 @@
-import { ResultOf } from '@/graphql/graphql.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { Trans } from '@/lib/trans.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { paymentWithRefundsFragment } from '../orders.graphql.js';
 
 type PaymentDetailsProps = {

packages/dashboard/src/app/routes/_authenticated/_orders/components/shipping-method-selector.tsx

@@ -1,10 +1,12 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
-import { Money } from '@/components/data-display/money.js';
-import { Trans } from '@/lib/trans.js';
+import { Money } from '@/vdb/components/data-display/money.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { draftOrderEligibleShippingMethodsDocument } from '../orders.graphql.js';
-import { ResultOf } from '@/graphql/graphql.js';
 
-type ShippingMethodQuote = ResultOf<typeof draftOrderEligibleShippingMethodsDocument>['eligibleShippingMethodsForDraftOrder'][number];
+type ShippingMethodQuote = ResultOf<
+    typeof draftOrderEligibleShippingMethodsDocument
+>['eligibleShippingMethodsForDraftOrder'][number];
 
 interface ShippingMethodSelectorProps {
     eligibleShippingMethods: ShippingMethodQuote[];
@@ -13,53 +15,50 @@ interface ShippingMethodSelectorProps {
     onSelect: (shippingMethodId: string) => void;
 }
 
-export function ShippingMethodSelector({ 
-    eligibleShippingMethods, 
+export function ShippingMethodSelector({
+    eligibleShippingMethods,
     selectedShippingMethodId,
     currencyCode,
-    onSelect 
+    onSelect,
 }: ShippingMethodSelectorProps) {
     return (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {eligibleShippingMethods?.length ? eligibleShippingMethods.map(method => (
-                <Card 
-                    key={method.id} 
-                    className={`cursor-pointer hover:bg-muted/50 transition-colors border-2 border-transparent ${
-                        selectedShippingMethodId === method.id 
-                            ? 'border-primary' 
-                            : ''
-                    }`}
-                    onClick={() => onSelect(method.id)}
-                >
-                    <CardHeader className="pb-2">
-                        <CardTitle className="">
-                            <Trans>{method.name}</Trans>
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <div className="space-y-2">
-                            {method.description && (
-                                <p className="text-sm text-muted-foreground">
-                                    <Trans>{method.description}</Trans>
-                                </p>
-                            )}
-                            <div className="flex items-center justify-between">
-                                <span className="text-sm font-medium">
-                                    <Trans>Price</Trans>
-                                </span>
-                                <Money 
-                                    value={method.priceWithTax} 
-                                    currencyCode={currencyCode} 
-                                />
+            {eligibleShippingMethods?.length ? (
+                eligibleShippingMethods.map(method => (
+                    <Card
+                        key={method.id}
+                        className={`cursor-pointer hover:bg-muted/50 transition-colors border-2 border-transparent ${
+                            selectedShippingMethodId === method.id ? 'border-primary' : ''
+                        }`}
+                        onClick={() => onSelect(method.id)}
+                    >
+                        <CardHeader className="pb-2">
+                            <CardTitle className="">
+                                <Trans>{method.name}</Trans>
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-2">
+                                {method.description && (
+                                    <p className="text-sm text-muted-foreground">
+                                        <Trans>{method.description}</Trans>
+                                    </p>
+                                )}
+                                <div className="flex items-center justify-between">
+                                    <span className="text-sm font-medium">
+                                        <Trans>Price</Trans>
+                                    </span>
+                                    <Money value={method.priceWithTax} currencyCode={currencyCode} />
+                                </div>
                             </div>
-                        </div>
-                    </CardContent>
-                </Card>
-            )) : (
+                        </CardContent>
+                    </Card>
+                ))
+            ) : (
                 <div className="col-span-full text-center text-muted-foreground">
                     <Trans>No shipping methods available</Trans>
                 </div>
             )}
         </div>
     );
-} 
+}

packages/dashboard/src/app/routes/_authenticated/_orders/orders.graphql.ts

@@ -1,5 +1,5 @@
-import { assetFragment, errorResultFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import { assetFragment, errorResultFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const orderListDocument = graphql(`
     query GetOrders($options: OrderListOptions) {

packages/dashboard/src/app/routes/_authenticated/_orders/orders.tsx

@@ -1,17 +1,17 @@
-import { Money } from '@/components/data-display/money.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { Money } from '@/vdb/components/data-display/money.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { Badge } from '@/vdb/components/ui/badge.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 { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
-import { createDraftOrderDocument, orderListDocument } from './orders.graphql.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
 import { PlusIcon } from 'lucide-react';
-import { useMutation } from '@tanstack/react-query';
-import { api } from '@/graphql/api.js';
-import { ResultOf } from '@/graphql/graphql.js';
+import { createDraftOrderDocument, orderListDocument } from './orders.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders')({
     component: OrderListPage,
@@ -25,8 +25,8 @@ function OrderListPage() {
         mutationFn: api.mutate(createDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof createDraftOrderDocument>) => {
             navigate({ to: '/orders/draft/$id', params: { id: result.createDraftOrder.id } });
-        }
-    })
+        },
+    });
     return (
         <ListPage
             pageId="order-list"
@@ -121,12 +121,13 @@ function OrderListPage() {
             facetedFilters={{
                 state: {
                     title: 'State',
-                    options: serverConfig?.orderProcess.map(state => {
-                        return {
-                            label: state.name,
-                            value: state.name,
-                        }
-                    }) ?? [],
+                    options:
+                        serverConfig?.orderProcess.map(state => {
+                            return {
+                                label: state.name,
+                                value: state.name,
+                            };
+                        }) ?? [],
                 },
             }}
         >

packages/dashboard/src/app/routes/_authenticated/_orders/orders_.$id.tsx

@@ -1,8 +1,8 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import {
     CustomFieldsPageBlock,
     Page,
@@ -11,10 +11,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { getDetailQueryOptions, useDetailPage } from '@/framework/page/use-detail-page.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { Link, createFileRoute, redirect } from '@tanstack/react-router';
 import { User } from 'lucide-react';
 import { toast } from 'sonner';

packages/dashboard/src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx

@@ -1,15 +1,23 @@
-import { ConfirmationDialog } from '@/components/shared/confirmation-dialog.js';
-import { CustomerSelector } from '@/components/shared/customer-selector.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { Form } from '@/components/ui/form.js';
-import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
-import { useGeneratedForm } from '@/framework/form-engine/use-generated-form.js';
-import { CustomFieldsPageBlock, Page, PageActionBar, PageActionBarRight, PageBlock, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { getDetailQueryOptions, useDetailPage } from '@/framework/page/use-detail-page.js';
-import { api } from '@/graphql/api.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { ConfirmationDialog } from '@/vdb/components/shared/confirmation-dialog.js';
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
+import { CustomerSelector } from '@/vdb/components/shared/customer-selector.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { useGeneratedForm } from '@/vdb/framework/form-engine/use-generated-form.js';
+import {
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { createFileRoute, Link, redirect, useNavigate } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
@@ -18,15 +26,28 @@ import { toast } from 'sonner';
 import { CustomerAddressSelector } from './components/customer-address-selector.js';
 import { EditOrderTable } from './components/edit-order-table.js';
 import { OrderAddress } from './components/order-address.js';
-import { addItemToDraftOrderDocument, adjustDraftOrderLineDocument, applyCouponCodeToDraftOrderDocument, deleteDraftOrderDocument, draftOrderEligibleShippingMethodsDocument, orderDetailDocument, removeCouponCodeFromDraftOrderDocument, removeDraftOrderLineDocument, setBillingAddressForDraftOrderDocument, setCustomerForDraftOrderDocument, setDraftOrderCustomFieldsDocument, setDraftOrderShippingMethodDocument, setShippingAddressForDraftOrderDocument, transitionOrderToStateDocument, unsetBillingAddressForDraftOrderDocument, unsetShippingAddressForDraftOrderDocument } from './orders.graphql.js';
-import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
+import {
+    addItemToDraftOrderDocument,
+    adjustDraftOrderLineDocument,
+    applyCouponCodeToDraftOrderDocument,
+    deleteDraftOrderDocument,
+    draftOrderEligibleShippingMethodsDocument,
+    orderDetailDocument,
+    removeCouponCodeFromDraftOrderDocument,
+    removeDraftOrderLineDocument,
+    setBillingAddressForDraftOrderDocument,
+    setCustomerForDraftOrderDocument,
+    setDraftOrderCustomFieldsDocument,
+    setDraftOrderShippingMethodDocument,
+    setShippingAddressForDraftOrderDocument,
+    transitionOrderToStateDocument,
+    unsetBillingAddressForDraftOrderDocument,
+    unsetShippingAddressForDraftOrderDocument,
+} from './orders.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders_/draft/$id')({
     component: DraftOrderPage,
-    loader: async ({
-        context,
-        params,
-    }) => {
+    loader: async ({ context, params }) => {
         if (!params.id) {
             throw new Error('ID param is required');
         }
@@ -80,7 +101,7 @@ function DraftOrderPage() {
                     quantity: entity.quantity,
                     orderLineId: entity.id,
                     customFields: entity.customFields,
-                }
+                },
             };
         },
     });
@@ -95,7 +116,7 @@ function DraftOrderPage() {
                 input: {
                     id: entity.id,
                     customFields: entity.customFields,
-                }
+                },
             };
         },
     });
@@ -286,12 +307,17 @@ function DraftOrderPage() {
     }
 
     const onSaveCustomFields = (values: any) => {
-        setDraftOrderCustomFields({ input: { id: entity.id, customFields: values.input?.customFields }, orderId: entity.id });
-    }
+        setDraftOrderCustomFields({
+            input: { id: entity.id, customFields: values.input?.customFields },
+            orderId: entity.id,
+        });
+    };
 
     return (
         <Page pageId="draft-order-detail" form={form}>
-            <PageTitle><Trans>Draft order</Trans>: {entity?.code ?? ''}</PageTitle>
+            <PageTitle>
+                <Trans>Draft order</Trans>: {entity?.code ?? ''}
+            </PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
                     <PermissionGuard requires={['DeleteOrder']}>
@@ -306,11 +332,16 @@ function DraftOrderPage() {
                                 <Trans>Delete draft</Trans>
                             </Button>
                         </ConfirmationDialog>
-
                     </PermissionGuard>
                     <PermissionGuard requires={['UpdateOrder']}>
-                        <Button type="button"
-                            disabled={!entity.customer || entity.lines.length === 0 || entity.shippingLines.length === 0 || entity.state !== 'Draft'}
+                        <Button
+                            type="button"
+                            disabled={
+                                !entity.customer ||
+                                entity.lines.length === 0 ||
+                                entity.shippingLines.length === 0 ||
+                                entity.state !== 'Draft'
+                            }
                             onClick={() => completeDraftOrder({ id: entity.id, state: 'ArrangingPayment' })}
                         >
                             <Trans>Complete draft</Trans>
@@ -320,88 +351,153 @@ function DraftOrderPage() {
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="main" blockId="order-table">
-                    <EditOrderTable order={entity}
-                        eligibleShippingMethods={eligibleShippingMethods?.eligibleShippingMethodsForDraftOrder ?? []}
-                        onSetShippingMethod={(e) => setShippingMethodForDraftOrder({ orderId: entity.id, shippingMethodId: e.shippingMethodId })}
-                        onAddItem={(e) => addItemToDraftOrder({ orderId: entity.id, input: { productVariantId: e.productVariantId, quantity: 1 } })}
-                        onAdjustLine={(e) => adjustDraftOrderLine({ orderId: entity.id, input: { orderLineId: e.lineId, quantity: e.quantity, customFields: e.customFields } as any })}
-                        onRemoveLine={(e) => removeDraftOrderLine({ orderId: entity.id, orderLineId: e.lineId })}
-                        onApplyCouponCode={(e) => setCouponCodeForDraftOrder({ orderId: entity.id, couponCode: e.couponCode })}
-                        onRemoveCouponCode={(e) => removeCouponCodeForDraftOrder({ orderId: entity.id, couponCode: e.couponCode })}
+                    <EditOrderTable
+                        order={entity}
+                        eligibleShippingMethods={
+                            eligibleShippingMethods?.eligibleShippingMethodsForDraftOrder ?? []
+                        }
+                        onSetShippingMethod={e =>
+                            setShippingMethodForDraftOrder({
+                                orderId: entity.id,
+                                shippingMethodId: e.shippingMethodId,
+                            })
+                        }
+                        onAddItem={e =>
+                            addItemToDraftOrder({
+                                orderId: entity.id,
+                                input: { productVariantId: e.productVariantId, quantity: 1 },
+                            })
+                        }
+                        onAdjustLine={e =>
+                            adjustDraftOrderLine({
+                                orderId: entity.id,
+                                input: {
+                                    orderLineId: e.lineId,
+                                    quantity: e.quantity,
+                                    customFields: e.customFields,
+                                } as any,
+                            })
+                        }
+                        onRemoveLine={e =>
+                            removeDraftOrderLine({
+                                orderId: entity.id,
+                                orderLineId: e.lineId,
+                            })
+                        }
+                        onApplyCouponCode={e =>
+                            setCouponCodeForDraftOrder({
+                                orderId: entity.id,
+                                couponCode: e.couponCode,
+                            })
+                        }
+                        onRemoveCouponCode={e =>
+                            removeCouponCodeForDraftOrder({
+                                orderId: entity.id,
+                                couponCode: e.couponCode,
+                            })
+                        }
                         orderLineForm={orderLineForm}
                     />
                 </PageBlock>
                 <PageBlock column="main" blockId="order-custom-fields" title={<Trans>Custom fields</Trans>}>
                     <Form {...orderCustomFieldsForm}>
-                        <CustomFieldsForm entityType="Order" control={orderCustomFieldsForm.control} formPathPrefix='input' />
+                        <CustomFieldsForm
+                            entityType="Order"
+                            control={orderCustomFieldsForm.control}
+                            formPathPrefix="input"
+                        />
                         <div className="mt-4">
-                            <Button type="submit" className=""
-                                disabled={!orderCustomFieldsForm.formState.isValid || !orderCustomFieldsForm.formState.isDirty}
-                                onClick={(e) => {
+                            <Button
+                                type="submit"
+                                className=""
+                                disabled={
+                                    !orderCustomFieldsForm.formState.isValid ||
+                                    !orderCustomFieldsForm.formState.isDirty
+                                }
+                                onClick={e => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                     orderCustomFieldsForm.handleSubmit(onSaveCustomFields)();
-                                }}>
+                                }}
+                            >
                                 <Trans>Set custom fields</Trans>
                             </Button>
                         </div>
                     </Form>
                 </PageBlock>
                 <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
-                    {entity?.customer?.id ? <Button variant="ghost" asChild className="mb-4">
-                        <Link to={`/customers/${entity?.customer?.id}`}>
-                            <User className="w-4 h-4" />
-                            {entity?.customer?.firstName} {entity?.customer?.lastName}
-                        </Link>
-                    </Button> : null}
-                    <CustomerSelector onSelect={customer => {
-                        setCustomerForDraftOrder({ orderId: entity.id, customerId: customer.id });
-                    }} />
+                    {entity?.customer?.id ? (
+                        <Button variant="ghost" asChild className="mb-4">
+                            <Link to={`/customers/${entity?.customer?.id}`}>
+                                <User className="w-4 h-4" />
+                                {entity?.customer?.firstName} {entity?.customer?.lastName}
+                            </Link>
+                        </Button>
+                    ) : null}
+                    <CustomerSelector
+                        onSelect={customer => {
+                            setCustomerForDraftOrder({ orderId: entity.id, customerId: customer.id });
+                        }}
+                    />
                 </PageBlock>
                 <PageBlock column="side" blockId="shipping-address" title={<Trans>Shipping address</Trans>}>
                     <div className="flex flex-col">
                         <OrderAddress address={entity.shippingAddress ?? undefined} />
-                        {entity.shippingAddress?.streetLine1
-                            ? <RemoveAddressButton onClick={() => unsetShippingAddressForDraftOrder({ orderId: entity.id })} />
-                            : <CustomerAddressSelector customerId={entity.customer?.id} onSelect={address => {
-                                setShippingAddressForDraftOrder({
-                                    orderId: entity.id, input: {
-                                        fullName: address.fullName,
-                                        company: address.company,
-                                        streetLine1: address.streetLine1,
-                                        streetLine2: address.streetLine2,
-                                        city: address.city,
-                                        province: address.province,
-                                        postalCode: address.postalCode,
-                                        countryCode: address.country.code,
-                                        phoneNumber: address.phoneNumber,
-                                    }
-                                });
-                            }} />
-                        }
+                        {entity.shippingAddress?.streetLine1 ? (
+                            <RemoveAddressButton
+                                onClick={() => unsetShippingAddressForDraftOrder({ orderId: entity.id })}
+                            />
+                        ) : (
+                            <CustomerAddressSelector
+                                customerId={entity.customer?.id}
+                                onSelect={address => {
+                                    setShippingAddressForDraftOrder({
+                                        orderId: entity.id,
+                                        input: {
+                                            fullName: address.fullName,
+                                            company: address.company,
+                                            streetLine1: address.streetLine1,
+                                            streetLine2: address.streetLine2,
+                                            city: address.city,
+                                            province: address.province,
+                                            postalCode: address.postalCode,
+                                            countryCode: address.country.code,
+                                            phoneNumber: address.phoneNumber,
+                                        },
+                                    });
+                                }}
+                            />
+                        )}
                     </div>
                 </PageBlock>
                 <PageBlock column="side" blockId="billing-address" title={<Trans>Billing address</Trans>}>
                     <div className="flex flex-col">
                         <OrderAddress address={entity.billingAddress ?? undefined} />
-                        {entity.billingAddress?.streetLine1
-                            ? <RemoveAddressButton onClick={() => unsetBillingAddressForDraftOrder({ orderId: entity.id })} />
-                            : <CustomerAddressSelector customerId={entity.customer?.id} onSelect={address => {
-                                setBillingAddressForDraftOrder({
-                                    orderId: entity.id, input: {
-                                        fullName: address.fullName,
-                                        company: address.company,
-                                        streetLine1: address.streetLine1,
-                                        streetLine2: address.streetLine2,
-                                        city: address.city,
-                                        province: address.province,
-                                        postalCode: address.postalCode,
-                                        countryCode: address.country.code,
-                                        phoneNumber: address.phoneNumber,
-                                    }
-                                });
-                            }} />
-                        }
+                        {entity.billingAddress?.streetLine1 ? (
+                            <RemoveAddressButton
+                                onClick={() => unsetBillingAddressForDraftOrder({ orderId: entity.id })}
+                            />
+                        ) : (
+                            <CustomerAddressSelector
+                                customerId={entity.customer?.id}
+                                onSelect={address => {
+                                    setBillingAddressForDraftOrder({
+                                        orderId: entity.id,
+                                        input: {
+                                            fullName: address.fullName,
+                                            company: address.company,
+                                            streetLine1: address.streetLine1,
+                                            streetLine2: address.streetLine2,
+                                            city: address.city,
+                                            province: address.province,
+                                            postalCode: address.postalCode,
+                                            countryCode: address.country.code,
+                                            phoneNumber: address.phoneNumber,
+                                        },
+                                    });
+                                }}
+                            />
+                        )}
                     </div>
                 </PageBlock>
             </PageLayout>
@@ -410,9 +506,11 @@ function DraftOrderPage() {
 }
 
 function RemoveAddressButton(props: { onClick: () => void }) {
-    return (<div className="">
-        <Button variant="outline" className="mt-4" size="sm" onClick={props.onClick}>
-            <Trans>Remove</Trans>
-        </Button>
-    </div>)
-}
+    return (
+        <div className="">
+            <Button variant="outline" className="mt-4" size="sm" onClick={props.onClick}>
+                <Trans>Remove</Trans>
+            </Button>
+        </div>
+    );
+}

packages/dashboard/src/app/routes/_authenticated/_payment-methods/components/payment-eligibility-checker-selector.tsx

@@ -1,15 +1,18 @@
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { Button } from '@/components/ui/button.js';
+import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { api } from '@/graphql/api.js';
-import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { api } from '@/vdb/graphql/api.js';
+import {
+    configurableOperationDefFragment,
+    ConfigurableOperationDefFragment,
+} from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { Plus } from 'lucide-react';

packages/dashboard/src/app/routes/_authenticated/_payment-methods/components/payment-handler-selector.tsx

@@ -1,15 +1,18 @@
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { Button } from '@/components/ui/button.js';
+import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { api } from '@/graphql/api.js';
-import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { api } from '@/vdb/graphql/api.js';
+import {
+    configurableOperationDefFragment,
+    ConfigurableOperationDefFragment,
+} from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { Plus } from 'lucide-react';
@@ -30,10 +33,7 @@ interface PaymentHandlerSelectorProps {
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
 }
 
-export function PaymentHandlerSelector({
-    value,
-    onChange,
-}: PaymentHandlerSelectorProps) {
+export function PaymentHandlerSelector({ value, onChange }: PaymentHandlerSelectorProps) {
     const { data: handlersData } = useQuery({
         queryKey: ['paymentMethodHandlers'],
         queryFn: () => api.query(paymentHandlersDocument),

packages/dashboard/src/app/routes/_authenticated/_payment-methods/components/payment-method-bulk-actions.tsx

@@ -1,8 +1,8 @@
-import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
-import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
-import { api } from '@/graphql/api.js';
-import { useChannel } from '@/index.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 { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
 import {

packages/dashboard/src/app/routes/_authenticated/_payment-methods/payment-methods.graphql.ts

@@ -1,5 +1,5 @@
-import { configurableOperationFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import { configurableOperationFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const paymentMethodItemFragment = graphql(`
     fragment PaymentMethodItem on PaymentMethod {

packages/dashboard/src/app/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -1,10 +1,10 @@
-import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
-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 { Trans } from '@/lib/trans.js';
+import { BooleanDisplayBadge } from '@/vdb/components/data-display/boolean.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { 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 { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import {

packages/dashboard/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -1,12 +1,12 @@
-import { RichTextInput } from '@/components/data-input/richt-text-input.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 { 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/richt-text-input.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 { 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,
@@ -16,10 +16,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 { PaymentEligibilityCheckerSelector } from './components/payment-eligibility-checker-selector.js';

packages/dashboard/src/app/routes/_authenticated/_product-variants/components/product-variant-bulk-actions.tsx

@@ -1,14 +1,14 @@
 import { TagIcon } from 'lucide-react';
 import { useState } from 'react';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
-import { usePriceFactor } from '@/components/shared/assign-to-channel-dialog.js';
-import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
-import { api } from '@/graphql/api.js';
-import { useChannel, usePaginatedList } from '@/index.js';
-import { Trans } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { usePriceFactor } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel, usePaginatedList } from '@/vdb/index.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
 import { AssignFacetValuesDialog } from '../../_products/components/assign-facet-values-dialog.js';

packages/dashboard/src/app/routes/_authenticated/_product-variants/components/variant-price-detail.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
+import { Money } from '@/vdb/components/data-display/money.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { Trans } from '@/lib/trans.js';
-import { graphql } from '@/graphql/graphql.js';
-import { api } from '@/graphql/api.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Money } from '@/components/data-display/money.js';
+import { useEffect, useState } from 'react';
 
 const taxRatesDocument = graphql(`
     query TaxRates($options: TaxRateListOptions) {
@@ -22,6 +22,7 @@ const taxRatesDocument = graphql(`
         }
     }
 `);
+
 interface VariantPriceDetailProps {
     priceIncludesTax: boolean;
     price: number | undefined;

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

@@ -1,5 +1,5 @@
-import { assetFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const productVariantListDocument = graphql(
     `

packages/dashboard/src/app/routes/_authenticated/_product-variants/product-variants.tsx

@@ -1,9 +1,9 @@
-import { Money } from '@/components/data-display/money.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { StockLevelLabel } from '@/components/shared/stock-level-label.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { Trans } from '@/lib/trans.js';
+import { Money } from '@/vdb/components/data-display/money.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { StockLevelLabel } from '@/vdb/components/shared/stock-level-label.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute } from '@tanstack/react-router';
 import {
     AssignFacetValuesToProductVariantsBulkAction,

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

@@ -1,17 +1,17 @@
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { AssignedFacetValues } from '@/components/shared/assigned-facet-values.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 { TaxCategorySelector } from '@/components/shared/tax-category-selector.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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
+import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TaxCategorySelector } from '@/vdb/components/shared/tax-category-selector.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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -21,11 +21,11 @@ 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 { useChannel } from '@/hooks/use-channel.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 { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Fragment } from 'react/jsx-runtime';
 import { toast } from 'sonner';

packages/dashboard/src/app/routes/_authenticated/_products/components/add-product-variant-dialog.tsx

@@ -1,6 +1,6 @@
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { Button } from '@/components/ui/button.js';
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -8,13 +8,13 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Form } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf, VariablesOf } from '@/graphql/graphql.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf, VariablesOf } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';

packages/dashboard/src/app/routes/_authenticated/_products/components/assign-facet-values-dialog.tsx

@@ -2,9 +2,9 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
-import { FacetValueChip } from '@/components/shared/facet-value-chip.js';
-import { FacetValue, FacetValueSelector } from '@/components/shared/facet-value-selector.js';
-import { Button } from '@/components/ui/button.js';
+import { FacetValueChip } from '@/vdb/components/shared/facet-value-chip.js';
+import { FacetValue, FacetValueSelector } from '@/vdb/components/shared/facet-value-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -12,11 +12,11 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 
-import { getDetailQueryOptions } from '@/framework/page/use-detail-page.js';
+import { getDetailQueryOptions } from '@/vdb/framework/page/use-detail-page.js';
 
 interface EntityWithFacetValues {
     id: string;

packages/dashboard/src/app/routes/_authenticated/_products/components/create-product-options-dialog.tsx

@@ -1,4 +1,5 @@
-import { Button } from '@/components/ui/button.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -6,13 +7,12 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Form } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus, Trash2 } from 'lucide-react';
@@ -99,10 +99,16 @@ const updateProductVariantDocument = graphql(`
 `);
 
 const formSchema = z.object({
-    optionGroups: z.array(z.object({
-        name: z.string().min(1, 'Option group name is required'),
-        options: z.array(z.string().min(1, 'Option name is required')).min(1, 'At least one option is required'),
-    })).min(1, 'At least one option group is required'),
+    optionGroups: z
+        .array(
+            z.object({
+                name: z.string().min(1, 'Option group name is required'),
+                options: z
+                    .array(z.string().min(1, 'Option name is required'))
+                    .min(1, 'At least one option is required'),
+            }),
+        )
+        .min(1, 'At least one option group is required'),
     existingVariantOptionIds: z.array(z.string()).min(1, 'Must select an option for the existing variant'),
 });
 
@@ -146,11 +152,11 @@ export function CreateProductOptionsDialog({
             setOpen(false);
             onSuccess?.();
         },
-        onError: (error) => {
+        onError: error => {
             toast.error(i18n.t('Failed to create product options'), {
                 description: error instanceof Error ? error.message : i18n.t('Unknown error'),
             });
-        }
+        },
     });
 
     const onSubmit = async (values: FormValues) => {
@@ -159,13 +165,13 @@ export function CreateProductOptionsDialog({
         try {
             // Create all option groups and their options
             const createdOptionGroups = await Promise.all(
-                values.optionGroups.map(async (group) => {
+                values.optionGroups.map(async group => {
                     const result = await createProductOptionGroupMutation.mutateAsync({
                         input: {
                             code: group.name.toLowerCase().replace(/\s+/g, '-'),
                             translations: [
                                 {
-                                    languageCode: "en",
+                                    languageCode: 'en',
                                     name: group.name,
                                 },
                             ],
@@ -173,7 +179,7 @@ export function CreateProductOptionsDialog({
                                 code: option.toLowerCase().replace(/\s+/g, '-'),
                                 translations: [
                                     {
-                                        languageCode: "en",
+                                        languageCode: 'en',
                                         name: option,
                                     },
                                 ],
@@ -188,14 +194,11 @@ export function CreateProductOptionsDialog({
                     });
 
                     return result.createProductOptionGroup;
-                })
+                }),
             );
 
             // Combine existing and newly created option groups
-            const allOptionGroups = [
-                ...(productData.product.optionGroups || []),
-                ...createdOptionGroups,
-            ];
+            const allOptionGroups = [...(productData.product.optionGroups || []), ...createdOptionGroups];
 
             // Map the selected option names to their IDs
             const selectedOptionIds = values.existingVariantOptionIds.map((optionName, index) => {
@@ -227,7 +230,7 @@ export function CreateProductOptionsDialog({
                         optionIds: selectedOptionIds,
                         translations: [
                             {
-                                languageCode: "en",
+                                languageCode: 'en',
                                 name: newVariantName,
                             },
                         ],
@@ -248,7 +251,10 @@ export function CreateProductOptionsDialog({
 
     const removeOptionGroup = (index: number) => {
         const currentGroups = form.getValues('optionGroups');
-        form.setValue('optionGroups', currentGroups.filter((_, i) => i !== index));
+        form.setValue(
+            'optionGroups',
+            currentGroups.filter((_, i) => i !== index),
+        );
     };
 
     const addOption = (groupIndex: number) => {
@@ -261,7 +267,9 @@ export function CreateProductOptionsDialog({
     const removeOption = (groupIndex: number, optionIndex: number) => {
         const currentGroups = form.getValues('optionGroups');
         const updatedGroups = [...currentGroups];
-        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter((_, i) => i !== optionIndex);
+        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter(
+            (_, i) => i !== optionIndex,
+        );
         form.setValue('optionGroups', updatedGroups);
     };
 
@@ -311,7 +319,10 @@ export function CreateProductOptionsDialog({
                                                     name={`optionGroups.${groupIndex}.options.${optionIndex}`}
                                                     label={<Trans>Option name</Trans>}
                                                     render={({ field }) => (
-                                                        <Input {...field} placeholder={i18n.t('e.g. Small')} />
+                                                        <Input
+                                                            {...field}
+                                                            placeholder={i18n.t('e.g. Small')}
+                                                        />
                                                     )}
                                                 />
                                                 {optionIndex > 0 && (
@@ -337,12 +348,7 @@ export function CreateProductOptionsDialog({
                                     </div>
                                 </div>
                             ))}
-                            <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                onClick={addOptionGroup}
-                            >
+                            <Button type="button" variant="outline" size="sm" onClick={addOptionGroup}>
                                 <Plus className="mr-2 h-4 w-4" />
                                 <Trans>Add another option group</Trans>
                             </Button>
@@ -354,7 +360,10 @@ export function CreateProductOptionsDialog({
                                     <Trans>Assign options to existing variant</Trans>
                                 </h3>
                                 <p className="text-sm text-muted-foreground">
-                                    <Trans>Select which options should apply to the existing variant "{productData.product.variants[0].name}"</Trans>
+                                    <Trans>
+                                        Select which options should apply to the existing variant "
+                                        {productData.product.variants[0].name}"
+                                    </Trans>
                                 </p>
                                 {/* Show existing option groups first */}
                                 {productData.product.optionGroups?.map((group, groupIndex) => (
@@ -367,14 +376,16 @@ export function CreateProductOptionsDialog({
                                             <select
                                                 className="w-full p-2 border rounded-md"
                                                 value={field.value}
-                                                onChange={(e) => {
-                                                    const newValues = [...form.getValues('existingVariantOptionIds')];
+                                                onChange={e => {
+                                                    const newValues = [
+                                                        ...form.getValues('existingVariantOptionIds'),
+                                                    ];
                                                     newValues[groupIndex] = e.target.value;
                                                     form.setValue('existingVariantOptionIds', newValues);
                                                 }}
                                             >
                                                 <option value="">Select an option</option>
-                                                {group.options.map((option) => (
+                                                {group.options.map(option => (
                                                     <option key={option.id} value={option.name}>
                                                         {option.name}
                                                     </option>
@@ -394,9 +405,14 @@ export function CreateProductOptionsDialog({
                                             <select
                                                 className="w-full p-2 border rounded-md"
                                                 value={field.value}
-                                                onChange={(e) => {
-                                                    const newValues = [...form.getValues('existingVariantOptionIds')];
-                                                    newValues[(productData?.product?.optionGroups?.length || 0) + groupIndex] = e.target.value;
+                                                onChange={e => {
+                                                    const newValues = [
+                                                        ...form.getValues('existingVariantOptionIds'),
+                                                    ];
+                                                    newValues[
+                                                        (productData?.product?.optionGroups?.length || 0) +
+                                                            groupIndex
+                                                    ] = e.target.value;
                                                     form.setValue('existingVariantOptionIds', newValues);
                                                 }}
                                             >
@@ -420,7 +436,7 @@ export function CreateProductOptionsDialog({
                                     createProductOptionGroupMutation.isPending ||
                                     addOptionGroupToProductMutation.isPending ||
                                     updateProductVariantMutation.isPending ||
-                                    (productData?.product?.variants[0] && 
+                                    (productData?.product?.variants[0] &&
                                         form.watch('existingVariantOptionIds').some(value => !value))
                                 }
                             >
@@ -432,4 +448,4 @@ export function CreateProductOptionsDialog({
             </DialogContent>
         </Dialog>
     );
-} 
+}

packages/dashboard/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx

@@ -1,22 +1,22 @@
-import { useCallback, useMemo, useState } from 'react';
-import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogDescription,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Button } from '@/components/ui/button.js';
-import { Plus } from 'lucide-react';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Trans } from '@/lib/trans.js';
-import { graphql } from '@/graphql/graphql.js';
-import { api } from '@/graphql/api.js';
+} from '@/vdb/components/ui/dialog.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { normalizeString } from '@/vdb/lib/utils.js';
 import { useMutation } from '@tanstack/react-query';
-import { normalizeString } from '@/lib/utils.js';
+import { Plus } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
 
 const createProductOptionsMutation = graphql(`
     mutation CreateOptionGroups($input: CreateProductOptionGroupInput!) {

packages/dashboard/src/app/routes/_authenticated/_products/components/create-product-variants.tsx

@@ -1,19 +1,18 @@
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
 import { Plus, Trash2 } from 'lucide-react';
 import { useEffect, useMemo } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useQuery } from '@tanstack/react-query';
-import { Alert, AlertDescription } from '@/components/ui/alert.js';
-import { Button } from '@/components/ui/button.js';
-import { Card } from '@/components/ui/card.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
-import { graphql } from '@/graphql/graphql.js';
-import { api } from '@/graphql/api.js';
 import { OptionValueInput } from './option-value-input.js';
 
 const getStockLocationsDocument = graphql(`
@@ -39,7 +38,6 @@ const optionGroupSchema = z.object({
     values: z.array(optionValueSchema).min(1, { message: 'At least one value is required' }),
 });
 
-
 type VariantOption = {
     name: string;
     value: string;
@@ -127,7 +125,10 @@ export function CreateProductVariants({ currencyCode = 'USD', onChange }: Create
 
     const watchedOptionGroups = watch('optionGroups');
     // memoize the variants
-    const variants = useMemo(() => generateVariants(watchedOptionGroups), [JSON.stringify(watchedOptionGroups)]);
+    const variants = useMemo(
+        () => generateVariants(watchedOptionGroups),
+        [JSON.stringify(watchedOptionGroups)],
+    );
 
     // Use the handleSubmit approach for the entire form
     useEffect(() => {

packages/dashboard/src/app/routes/_authenticated/_products/components/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 {
@@ -93,4 +95,4 @@ export function OptionValueInput({ groupName, groupIndex, disabled = false }: Op
             </div>
         </div>
     );
-}
+}

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

@@ -1,14 +1,14 @@
 import { TagIcon } from 'lucide-react';
 import { useState } from 'react';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
-import { usePriceFactor } from '@/components/shared/assign-to-channel-dialog.js';
-import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
-import { api } from '@/graphql/api.js';
-import { useChannel, usePaginatedList } from '@/index.js';
-import { Trans } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { usePriceFactor } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel, usePaginatedList } from '@/vdb/index.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {

packages/dashboard/src/app/routes/_authenticated/_products/components/product-option-select.tsx

@@ -1,21 +1,17 @@
-import { useState } from 'react';
-import { Plus, Check, ChevronsUpDown } from 'lucide-react';
-import { Button } from '@/components/ui/button.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Command,
     CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
-} from '@/components/ui/command.js';
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '@/components/ui/popover.js';
-import { cn } from '@/lib/utils.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
+import { useState } from 'react';
 
 interface ProductOption {
     id: string;
@@ -48,31 +44,24 @@ export function ProductOptionSelect({ group, value, onChange, onCreateOption }:
             name={`options.${group.id}`}
             label={group.name}
             render={() => (
-                <Popover
-                    open={open}
-                    onOpenChange={setOpen}
-                >
+                <Popover open={open} onOpenChange={setOpen}>
                     <PopoverTrigger asChild>
-                        <Button
-                            variant="outline"
-                            role="combobox"
-                            className="w-full justify-between"
-                        >
-                            {value
-                                ? group.options.find(
-                                    (option) => option.id === value,
-                                )?.name
-                                : <Trans>Select {group.name}</Trans>}
+                        <Button variant="outline" role="combobox" className="w-full justify-between">
+                            {value ? (
+                                group.options.find(option => option.id === value)?.name
+                            ) : (
+                                <Trans>Select {group.name}</Trans>
+                            )}
                             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                         </Button>
                     </PopoverTrigger>
                     <PopoverContent className="w-full p-0">
                         <Command>
-                            <CommandInput 
-                                placeholder={i18n.t('Search {name}...').replace('{name}', group.name)} 
+                            <CommandInput
+                                placeholder={i18n.t('Search {name}...').replace('{name}', group.name)}
                                 onValueChange={setNewOptionInput}
                             />
-                            <CommandEmpty className='py-2'>
+                            <CommandEmpty className="py-2">
                                 <div className="p-2">
                                     <Button
                                         variant="outline"
@@ -89,7 +78,7 @@ export function ProductOptionSelect({ group, value, onChange, onCreateOption }:
                                 </div>
                             </CommandEmpty>
                             <CommandGroup>
-                                {group.options.map((option) => (
+                                {group.options.map(option => (
                                     <CommandItem
                                         key={option.id}
                                         value={option.name}
@@ -100,8 +89,8 @@ export function ProductOptionSelect({ group, value, onChange, onCreateOption }:
                                     >
                                         <Check
                                             className={cn(
-                                                "mr-2 h-4 w-4",
-                                                value === option.id ? "opacity-100" : "opacity-0"
+                                                'mr-2 h-4 w-4',
+                                                value === option.id ? 'opacity-100' : 'opacity-0',
                                             )}
                                         />
                                         {option.name}
@@ -114,4 +103,4 @@ export function ProductOptionSelect({ group, value, onChange, onCreateOption }:
             )}
         />
     );
-} 
+}

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

@@ -1,12 +1,12 @@
-import { Money } from '@/components/data-display/money.js';
+import { Money } from '@/vdb/components/data-display/money.js';
 import {
     PaginatedListDataTable,
     PaginatedListRefresherRegisterFn,
-} from '@/components/shared/paginated-list-data-table.js';
-import { StockLevelLabel } from '@/components/shared/stock-level-label.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { DetailPageButton } from '@/index.js';
+} from '@/vdb/components/shared/paginated-list-data-table.js';
+import { StockLevelLabel } from '@/vdb/components/shared/stock-level-label.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { DetailPageButton } from '@/vdb/index.js';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
 import { productVariantListDocument } from '../products.graphql.js';

packages/dashboard/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -1,5 +1,5 @@
-import { assetFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const productListDocument = graphql(`
     query ProductList($options: ProductListOptions) {

packages/dashboard/src/app/routes/_authenticated/_products/products.tsx

@@ -1,9 +1,9 @@
-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 { Trans } from '@/lib/trans.js';
+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 { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import {

packages/dashboard/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -1,15 +1,15 @@
-import { RichTextInput } from '@/components/data-input/richt-text-input.js';
-import { AssignedFacetValues } from '@/components/shared/assigned-facet-values.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/richt-text-input.js';
+import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
+import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+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,
@@ -19,10 +19,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 { useRef } from 'react';
 import { toast } from 'sonner';

packages/dashboard/src/app/routes/_authenticated/_profile/profile.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const activeAdministratorDocument = graphql(`
     query ActiveAdministrator {