npm - @leandrosk/dashboard - Versions diffs - 3.5.5 - Mend

@leandrosk/dashboard 3.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (643) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,118 @@
+# Vendure Dashboard
+This is a React-based admin dashboard for Vendure. It is a standalone application that can be extended to suit the
+needs of any Vendure project.
+The package consists of three main components:
+- `@vendure/dashboard`: Dashboard source code
+- `@vendure/dashboard/vite`: A Vite plugin that is used to compile the dashboard in your project
+- `@vendure/dashboard/plugin`: A Vendure plugin that provides backend functionality used by the dashboard app.
+## DashboardPlugin
+### Basic usage - serving the Dashboard UI
+```typescript
+import { DashboardPlugin } from '@vendure/dashboard-plugin';
+const config: VendureConfig = {
+  // Add an instance of the plugin to the plugins array
+  plugins: [
+    DashboardPlugin.init({ route: 'dashboard' }),
+  ],
+};
+```
+The Dashboard UI will be served at the `/dashboard/` path.
+### Using only the metrics API
+If you are building a stand-alone version of the Dashboard UI app and don't need this plugin to serve the Dashboard UI, you can still use the `metricSummary` query by adding the `DashboardPlugin` to the `plugins` array without calling the `init()` method:
+```typescript
+import { DashboardPlugin } from '@vendure/dashboard-plugin';
+const config: VendureConfig = {
+  plugins: [
+    DashboardPlugin, // <-- no call to .init()
+  ],
+  // ...
+};
+```
+### Custom Dashboard UI build
+You can also provide a custom build of the Dashboard UI:
+```typescript
+import { DashboardPlugin } from '@vendure/dashboard-plugin';
+const config: VendureConfig = {
+  plugins: [
+    DashboardPlugin.init({
+      route: 'dashboard',
+      app: path.join(__dirname, 'custom-dashboard-build'),
+    }),
+  ],
+};
+```
+## API
+### DashboardPluginOptions
+- `route: string` - The route at which the Dashboard UI will be served (default: `'dashboard'`)
+- `app?: string` - Optional path to a custom build of the Dashboard UI
+## Development
+Run `npx vite` to start Vite in dev mode.
+### Note on internal `@/vdb` imports
+You will notice that the dashboard uses internal Vendure Dashboard imports prefixed with `@/vdb`. This is adapted from the
+convention of Shadcn which uses a `@/*` path alias for internal imports.
+**Why not just use relative imports?**
+The problem with using relative imports is that they are handled differently by Vite when compiling the dashboard. This
+manifests as things like React Context not working correctly. The underlying reason is that Vite will selectively
+pre-compile source code and mixing the imports between alias and relative can result in 2 "versions" of the same code
+being loaded, which causes issues with React Context and other things that rely on a single instance of a module.
+For this reason, try to use the `@/vdb` alias for all internal Vendure Dashboard imports to the "src/lib" directory.
+This is especially import for hooks (since many of them use React Context) and there is even a pre-commit hook
+that will run [a script](./scripts/check-internal-imports.js) to ensure that you are not using relative imports for
+internal Vendure Dashboard code.
+**Type Safety for Consumers**
+Because we ship source code in the npm package, consumers need to tell TypeScript how to resolve these internal
+imports by adding the path alias to _their_ `tsconfig.json` file.
+```json
+{
+    "compilerOptions": {
+        "paths": {
+            "@/vdb/*": [
+                "./node_modules/@vendure/dashboard/src/lib/*"
+            ]
+        }
+    }
+}
+```
+Note: even without that path alias, the vite compilation will still work, but TypeScript types will not resolve correctly
+when developing dashboard extensions.
+## Testing
+Run `npm run test` to run unit tests once, or `npx vitest` to run them in watch mode.
+For E2E (Playwright) tests, see [e2e/README.md](./e2e/README.md).
+## Translations
+See [./scripts/translate/README.md](./scripts/translate/README.md)

package/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Vendure Admin Dashboard" />
+    <meta name="author" content="Vendure" />
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/app/main.jsx"></script>
+</body>
+</html>

package/lingui.config.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { defineConfig } from '@lingui/cli';
+export default defineConfig({
+    sourceLocale: 'en',
+    locales: [
+        'he',
+        'ar',
+        'de',
+        'en',
+        'es',
+        'pl',
+        'zh_Hans',
+        'zh_Hant',
+        'pt_BR',
+        'pt_PT',
+        'cs',
+        'fr',
+        'ru',
+        'uk',
+        'it',
+        'fa',
+        'ne',
+        'hr',
+        'nb',
+        'sv',
+        'tr',
+        'ja',
+        'bg',
+        'nl',
+        'el'
+    ],
+    catalogs: [
+        {
+            path: '<rootDir>/src/i18n/locales/{locale}',
+            include: ['<rootDir>/src'],
+            exclude: ['<rootDir>/src/**/*.stories.tsx'],
+        },
+    ],
+});

package/package.json ADDED Viewed

@@ -0,0 +1,183 @@
+{
+    "name": "@leandrosk/dashboard",
+    "private": false,
+    "version": "3.5.5",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vendurehq/vendure"
+    },
+    "homepage": "https://www.vendure.io",
+    "funding": "https://github.com/sponsors/michaelbromley",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "dev": "vite",
+        "check-types": "tsc --project tsconfig.check.json --noEmit",
+        "build:standalone": "vite build",
+        "build:vite": "tsc --project tsconfig.vite.json",
+        "build:plugin": "tsc --project tsconfig.plugin.json && node scripts/build-plugin.js",
+        "build": "npm run check-types && npm run build:vite && npm run build:plugin",
+        "watch": "tsc --project tsconfig.vite.json --watch",
+        "test": "vitest run",
+        "lint": "eslint .",
+        "preview": "vite preview",
+        "generate-index": "node scripts/generate-index.js",
+        "i18n:extract": "lingui extract && node ./scripts/translate/i18n-tool.js extract",
+        "i18n:apply": "node ./scripts/translate/i18n-tool.js apply",
+        "i18n:check": "node ./scripts/translate/check-translations.js",
+        "storybook": "storybook dev -p 6006",
+        "e2e:pw": "playwright test --config e2e/playwright.config.ts",
+        "e2e:ui": "playwright test --config e2e/playwright.config.ts --ui",
+        "storybook:build": "storybook build",
+        "storybook:deploy": "npm run build --prefix ../common && npm run build --prefix ../core && npm run build:vite && storybook build"
+    },
+    "module": "./src/lib/index.ts",
+    "main": "./src/lib/index.ts",
+    "types": "./src/lib/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./src/lib/index.d.ts",
+            "import": "./src/lib/index.ts",
+            "require": "./src/lib/index.ts"
+        },
+        "./plugin": {
+            "types": "./dist/plugin/index.d.ts",
+            "import": "./dist/plugin/index.js",
+            "require": "./dist/plugin/index.js"
+        },
+        "./vite": {
+            "types": "./dist/vite/index.d.ts",
+            "import": "./dist/vite/index.js",
+            "require": "./dist/vite/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "src",
+        "lingui.config.js",
+        "index.html"
+    ],
+    "dependencies": {
+        "@babel/core": "^7.26.0",
+        "@babel/preset-react": "^7.26.3",
+        "@babel/preset-typescript": "^7.26.0",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@hookform/resolvers": "^4.1.3",
+        "@lingui/babel-plugin-lingui-macro": "^5.7.0",
+        "@lingui/cli": "^5.7.0",
+        "@lingui/core": "^5.7.0",
+        "@lingui/react": "^5.7.0",
+        "@lingui/vite-plugin": "^5.7.0",
+        "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-alert-dialog": "^1.1.14",
+        "@radix-ui/react-aspect-ratio": "^1.1.7",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-collapsible": "^1.1.11",
+        "@radix-ui/react-context-menu": "^2.2.15",
+        "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-direction": "^1.1.1",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-hover-card": "^1.1.14",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-menubar": "^1.1.15",
+        "@radix-ui/react-navigation-menu": "^1.2.13",
+        "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-radio-group": "^1.3.7",
+        "@radix-ui/react-scroll-area": "^1.2.9",
+        "@radix-ui/react-select": "^2.2.5",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slider": "^1.3.5",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.5",
+        "@radix-ui/react-tabs": "^1.1.12",
+        "@radix-ui/react-toggle": "^1.1.9",
+        "@radix-ui/react-toggle-group": "^1.1.10",
+        "@radix-ui/react-tooltip": "^1.2.7",
+        "@tailwindcss/vite": "^4.1.5",
+        "@tanstack/eslint-plugin-query": "^5.66.1",
+        "@tanstack/react-query": "^5.66.7",
+        "@tanstack/react-query-devtools": "^5.68.0",
+        "@tanstack/react-router": "^1.154.0",
+        "@tanstack/react-table": "^8.21.2",
+        "@tanstack/router-devtools": "^1.154.0",
+        "@tanstack/router-plugin": "^1.154.0",
+        "@tiptap/extension-floating-menu": "^3.4.4",
+        "@tiptap/extension-image": "^3.4.4",
+        "@tiptap/extension-table": "^3.4.4",
+        "@tiptap/extension-text-style": "^3.4.4",
+        "@tiptap/pm": "^3.4.4",
+        "@tiptap/react": "^3.4.4",
+        "@tiptap/starter-kit": "^3.4.4",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
+        "@uidotdev/usehooks": "^2.4.1",
+        "@vitejs/plugin-react": "^5.0.4",
+        "acorn": "^8.11.3",
+        "acorn-walk": "^8.3.2",
+        "awesome-graphql-client": "^2.1.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "date-fns": "^4.0.0",
+        "embla-carousel-react": "^8.6.0",
+        "express-rate-limit": "^7.5.0",
+        "fast-glob": "^3.3.2",
+        "fs-extra": "^11.2.0",
+        "gql.tada": "^1.8.13",
+        "graphql": "^16.11.0",
+        "input-otp": "^1.4.2",
+        "json-edit-react": "^1.23.1",
+        "lucide-react": "^0.475.0",
+        "motion": "^12.6.2",
+        "next-themes": "^0.4.6",
+        "react": "^19.0.0",
+        "react-day-picker": "^9.8.0",
+        "react-dom": "^19.0.0",
+        "react-dropzone": "^14.3.8",
+        "react-hook-form": "^7.60.0",
+        "react-resizable-panels": "^3.0.3",
+        "recharts": "^2.15.4",
+        "sonner": "^2.0.6",
+        "strip-json-comments": "^5.0.3",
+        "tailwind-merge": "^3.2.0",
+        "tailwindcss": "^4.1.5",
+        "tailwindcss-animate": "^1.0.7",
+        "tsconfig-paths": "^4.2.0",
+        "tw-animate-css": "^1.2.9",
+        "vaul": "^1.1.2",
+        "vite": "^6.3.6",
+        "zod": "^3.25.76"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.19.0",
+        "@playwright/test": "^1.58.2",
+        "@storybook/addon-a11y": "^10.0.0-beta.9",
+        "@storybook/addon-docs": "^10.0.0-beta.9",
+        "@storybook/addon-vitest": "^10.0.0-beta.9",
+        "@storybook/react-vite": "^10.0.0-beta.9",
+        "@types/node": "^22.13.4",
+        "@vendure/common": "3.5.5",
+        "@vendure/core": "3.5.5",
+        "@vitest/browser": "^3.2.4",
+        "@vitest/coverage-v8": "^3.2.4",
+        "eslint": "^9.19.0",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.18",
+        "eslint-plugin-storybook": "^10.0.0-beta.9",
+        "globals": "^15.14.0",
+        "playwright": "^1.55.1",
+        "storybook": "^10.0.0-beta.9",
+        "vite-plugin-dts": "^4.5.4"
+    },
+    "optionalDependencies": {
+        "lightningcss-linux-arm64-musl": "^1.29.3",
+        "lightningcss-linux-x64-musl": "^1.29.1"
+    }
+}

package/src/app/app-providers.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { AlertsProvider } from '@/vdb/providers/alerts-provider.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 React from 'react';
+export const queryClient = new QueryClient();
+export function AppProviders({ children }: { children: React.ReactNode }) {
+    return (
+        <I18nProvider>
+            <QueryClientProvider client={queryClient}>
+                <UserSettingsProvider queryClient={queryClient}>
+                    <ThemeProvider defaultTheme="system">
+                        <AuthProvider>
+                            <ServerConfigProvider>
+                                <ChannelProvider>
+                                    <AlertsProvider>{children}</AlertsProvider>
+                                </ChannelProvider>
+                            </ServerConfigProvider>
+                        </AuthProvider>
+                    </ThemeProvider>
+                </UserSettingsProvider>
+            </QueryClientProvider>
+        </I18nProvider>
+    );
+}

package/src/app/common/delete-bulk-action.tsx ADDED Viewed

@@ -0,0 +1,149 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { TrashIcon } from 'lucide-react';
+import { toast } from 'sonner';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { usePaginatedList } from '@/vdb/hooks/use-paginated-list.js';
+import { getMutationName } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+interface DeleteBulkActionProps {
+    /** The GraphQL mutation document to execute */
+    mutationDocument: any;
+    /** The entity name for localization (e.g., "products", "administrators") */
+    entityName: string;
+    /** The required permissions for this action */
+    requiredPermissions: string[];
+    /** Optional callback for additional cleanup after successful deletion */
+    onSuccess?: () => void;
+    /** Optional query keys to invalidate after successful deletion */
+    invalidateQueries?: string[];
+    /** The selected items to delete */
+    selection: any[];
+    /** The table instance */
+    table: any;
+}
+/**
+ * A reusable delete bulk action component that can be used across all bulk action files.
+ *
+ * This component handles the common pattern of deleting multiple entities:
+ * - Executes the provided GraphQL mutation
+ * - Shows success/error toasts with localized messages
+ * - Refetches the paginated list
+ * - Resets table selection
+ * - Optionally invalidates additional queries
+ * - Optionally calls additional success callbacks
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *     return (
+ *         <DeleteBulkAction
+ *             mutationDocument={deleteProductsDocument}
+ *             entityName="products"
+ *             requiredPermissions={['DeleteCatalog', 'DeleteProduct']}
+ *             selection={selection}
+ *             table={table}
+ *         />
+ *     );
+ * };
+ *
+ * // With additional cleanup
+ * export const DeleteCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *     return (
+ *         <DeleteBulkAction
+ *             mutationDocument={deleteCollectionsDocument}
+ *             entityName="collections"
+ *             requiredPermissions={['DeleteCatalog', 'DeleteCollection']}
+ *             invalidateQueries={['childCollections']}
+ *             onSuccess={() => {
+ *                 // Additional cleanup logic
+ *             }}
+ *             selection={selection}
+ *             table={table}
+ *         />
+ *     );
+ * };
+ * ```
+ */
+export function DeleteBulkAction({
+    mutationDocument,
+    entityName,
+    requiredPermissions,
+    onSuccess,
+    invalidateQueries = [],
+    selection,
+    table,
+}: Readonly<DeleteBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { t } = useLingui();
+    const queryClient = useQueryClient();
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(mutationDocument),
+        onSuccess: (result: any) => {
+            let deleted = 0;
+            let failed = 0;
+            const errors: string[] = [];
+            // Get the mutation result field name from the document
+            const mutationResultFieldName = getMutationName(mutationDocument);
+            const deleteResults = result[mutationResultFieldName];
+            for (const item of deleteResults) {
+                if (item.result === 'DELETED') {
+                    deleted++;
+                } else {
+                    failed++;
+                    if (item.message) {
+                        errors.push(item.message);
+                    }
+                }
+            }
+            if (0 < deleted) {
+                toast.success(t`Deleted ${deleted} ${entityName}`);
+            }
+            if (0 < failed) {
+                const allErrors = errors.join(', ');
+                const errorMessage =
+                    errors.length > 0
+                        ? t`Failed to delete ${failed} ${entityName}: ${allErrors}`
+                        : t`Failed to delete ${failed} ${entityName}`;
+                toast.error(errorMessage);
+            }
+            refetchPaginatedList();
+            table.resetRowSelection();
+            // Invalidate additional queries if specified
+            invalidateQueries.forEach(queryKey => {
+                queryClient.invalidateQueries({ queryKey: [queryKey] });
+            });
+            // Call additional success callback if provided
+            onSuccess?.();
+        },
+        onError: () => {
+            toast.error(`Failed to delete ${selection.length} ${entityName}`);
+        },
+    });
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={requiredPermissions}
+            onClick={() => mutate({ ids: selection.map(s => s.id) })}
+            label={<Trans>Delete</Trans>}
+            confirmationText={
+                <Trans>
+                    Are you sure you want to delete {selection.length} {entityName}?
+                </Trans>
+            }
+            icon={TrashIcon}
+            className="text-destructive"
+        />
+    );
+}

package/src/app/common/duplicate-bulk-action.tsx ADDED Viewed

@@ -0,0 +1,147 @@
+import { useMutation } from '@tanstack/react-query';
+import { ConfigurableOperationInput } from '@vendure/common/lib/generated-types';
+import { CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { usePaginatedList } from '@/vdb/hooks/use-paginated-list.js';
+import { api } from '@/vdb/graphql/api.js';
+import { duplicateEntityDocument } from '@/vdb/graphql/common-operations.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { DuplicateEntityDialog } from './duplicate-entity-dialog.js';
+interface DuplicateBulkActionProps {
+    entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
+    duplicatorCode: string;
+    requiredPermissions: string[];
+    entityName: string;
+    onSuccess?: () => void;
+    selection: any[];
+    table: any;
+}
+export function DuplicateBulkAction({
+    entityType,
+    duplicatorCode,
+    requiredPermissions,
+    entityName,
+    onSuccess,
+    selection,
+    table,
+}: Readonly<DuplicateBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { t } = useLingui();
+    const [isDuplicating, setIsDuplicating] = useState(false);
+    const [progress, setProgress] = useState({ completed: 0, total: 0 });
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const { mutateAsync } = useMutation({
+        mutationFn: api.mutate(duplicateEntityDocument),
+    });
+    const handleStartDuplication = () => {
+        if (isDuplicating) return;
+        setDialogOpen(true);
+    };
+    const handleConfirmDuplication = async (duplicatorInput: ConfigurableOperationInput) => {
+        if (isDuplicating) return;
+        setIsDuplicating(true);
+        setProgress({ completed: 0, total: selection.length });
+        const results = {
+            success: 0,
+            failed: 0,
+            errors: [] as string[],
+        };
+        try {
+            // Process entities sequentially to avoid overwhelming the server
+            for (let i = 0; i < selection.length; i++) {
+                const entity = selection[i];
+                try {
+                    const result = await mutateAsync({
+                        input: {
+                            entityName: entityType,
+                            entityId: entity.id,
+                            duplicatorInput,
+                        },
+                    });
+                    if ('newEntityId' in result.duplicateEntity) {
+                        results.success++;
+                    } else {
+                        results.failed++;
+                        const errorMsg =
+                            result.duplicateEntity.message ||
+                            result.duplicateEntity.duplicationError ||
+                            'Unknown error';
+                        results.errors.push(`${entityName} ${entity.name || entity.id}: ${errorMsg}`);
+                    }
+                } catch (error) {
+                    results.failed++;
+                    results.errors.push(
+                        `${entityName} ${entity.name || entity.id}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                    );
+                }
+                setProgress({ completed: i + 1, total: selection.length });
+            }
+            // Show results
+            if (results.success > 0) {
+                const count = results.success;
+                toast.success(t`Successfully duplicated ${count} ${entityName}`);
+            }
+            if (results.failed > 0) {
+                const errorMessage =
+                    results.errors.length > 3
+                        ? `${results.errors.slice(0, 3).join(', ')}... and ${results.errors.length - 3} more`
+                        : results.errors.join(', ');
+                toast.error(
+                    `Failed to duplicate ${results.failed} ${entityName.toLowerCase()}s: ${errorMessage}`,
+                );
+            }
+            if (results.success > 0) {
+                refetchPaginatedList();
+                table.resetRowSelection();
+                onSuccess?.();
+            }
+        } finally {
+            setIsDuplicating(false);
+            setProgress({ completed: 0, total: 0 });
+        }
+    };
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={requiredPermissions}
+                onClick={handleStartDuplication}
+                label={
+                    isDuplicating ? (
+                        <Trans>
+                            Duplicating... ({progress.completed}/{progress.total})
+                        </Trans>
+                    ) : (
+                        <Trans>Duplicate</Trans>
+                    )
+                }
+                icon={CopyIcon}
+            />
+            <DuplicateEntityDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                entityType={entityType}
+                entityName={entityName}
+                entities={selection}
+                duplicatorCode={duplicatorCode}
+                onConfirm={handleConfirmDuplication}
+            />
+        </>
+    );
+}