@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -1,5 +1,5 @@
-import { assetFragment } from '@/vdb/graphql/fragments.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
+import { assetFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
 
 export const productListDocument = graphql(`
     query ProductList($options: ProductListOptions) {
@@ -119,71 +119,3 @@ export const deleteProductDocument = graphql(`
         }
     }
 `);
-
-export const deleteProductsDocument = graphql(`
-    mutation DeleteProducts($ids: [ID!]!) {
-        deleteProducts(ids: $ids) {
-            result
-            message
-        }
-    }
-`);
-
-export const assignProductsToChannelDocument = graphql(`
-    mutation AssignProductsToChannel($input: AssignProductsToChannelInput!) {
-        assignProductsToChannel(input: $input) {
-            id
-            channels {
-                id
-                code
-            }
-        }
-    }
-`);
-
-export const removeProductsFromChannelDocument = graphql(`
-    mutation RemoveProductsFromChannel($input: RemoveProductsFromChannelInput!) {
-        removeProductsFromChannel(input: $input) {
-            id
-            channels {
-                id
-                code
-            }
-        }
-    }
-`);
-
-export const updateProductsDocument = graphql(`
-    mutation UpdateProducts($input: [UpdateProductInput!]!) {
-        updateProducts(input: $input) {
-            id
-            name
-            facetValues {
-                id
-                name
-                code
-            }
-        }
-    }
-`);
-
-export const getProductsWithFacetValuesByIdsDocument = graphql(`
-    query GetProductsWithFacetValuesByIds($ids: [String!]!) {
-        products(options: { filter: { id: { in: $ids } } }) {
-            items {
-                id
-                name
-                facetValues {
-                    id
-                    name
-                    code
-                    facet {
-                        id
-                        name
-                        code
-                    }
-                }
-            }
-        }
-    }
-`);

package/src/app/routes/_authenticated/_products/products.tsx

@@ -1,18 +1,11 @@
-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 { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { PageActionBar, PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { PlusIcon } from 'lucide-react';
-import {
-    AssignFacetValuesToProductsBulkAction,
-    AssignProductsToChannelBulkAction,
-    DeleteProductsBulkAction,
-    DuplicateProductsBulkAction,
-    RemoveProductsFromChannelBulkAction,
-} from './components/product-bulk-actions.js';
+import { PlusIcon, TrashIcon } from 'lucide-react';
 import { deleteProductDocument, productListDocument } from './products.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products')({
@@ -39,28 +32,6 @@ function ProductListPage() {
                 };
             }}
             route={Route}
-            bulkActions={[
-                {
-                    component: AssignProductsToChannelBulkAction,
-                    order: 100,
-                },
-                {
-                    component: RemoveProductsFromChannelBulkAction,
-                    order: 200,
-                },
-                {
-                    component: AssignFacetValuesToProductsBulkAction,
-                    order: 300,
-                },
-                {
-                    component: DuplicateProductsBulkAction,
-                    order: 400,
-                },
-                {
-                    component: DeleteProductsBulkAction,
-                    order: 500,
-                },
-            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateProduct', 'CreateCatalog']}>

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -1,15 +1,15 @@
-import { RichTextInput } from '@/vdb/components/data-input/rich-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 { 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 {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -19,24 +19,21 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} 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';
+} 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';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { useRef } from 'react';
 import { toast } from 'sonner';
-import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
+import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
-
-const pageId = 'product-detail';
+import { useRef } from 'react';
 
 export const Route = createFileRoute('/_authenticated/_products/products_/$id')({
     component: ProductDetailPage,
     loader: detailPageRouteLoader({
-        pageId,
         queryDocument: productDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -56,8 +53,6 @@ function ProductDetailPage() {
     const refreshRef = useRef<() => void>(() => {});
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
-        pageId,
-        entityName: 'Product',
         queryDocument: productDetailDocument,
         createDocument: createProductDocument,
         updateDocument: updateProductDocument,
@@ -93,9 +88,9 @@ function ProductDetailPage() {
             });
         },
     });
-
+    
     return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId="product-detail" entity={entity} form={form} submitHandler={submitHandler}>
             <PageTitle>{creatingNewEntity ? <Trans>New product</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
@@ -147,14 +142,10 @@ function ProductDetailPage() {
                 <CustomFieldsPageBlock column="main" entityType="Product" control={form.control} />
                 {entity && entity.variantList.totalItems > 0 && (
                     <PageBlock column="main" blockId="product-variants-table">
-                        <ProductVariantsTable
-                            productId={params.id}
-                            registerRefresher={refresher => {
-                                refreshRef.current = refresher;
-                            }}
-                            fromProductDetailPage={true}
-                        />
-                        <div className="mt-4">
+                        <ProductVariantsTable productId={params.id} registerRefresher={refresher => {
+                            refreshRef.current = refresher;
+                        }} />
+                         <div className="mt-4">
                             <AddProductVariantDialog
                                 productId={params.id}
                                 onSuccess={() => {

package/src/app/routes/_authenticated/_profile/profile.graphql.ts

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

package/src/app/routes/_authenticated/_profile/profile.tsx

@@ -1,7 +1,7 @@
-import { ErrorPage } from '@/vdb/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Input } from '@/vdb/components/ui/input.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -11,10 +11,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} 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';
+} 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';
 import { createFileRoute } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { activeAdministratorDocument, updateAdministratorDocument } from './profile.graphql.js';

package/src/app/routes/_authenticated/_promotions/components/promotion-actions-selector.tsx

@@ -1,22 +1,19 @@
-import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
-import { Button } from '@/vdb/components/ui/button.js';
+import { graphql } from '@/graphql/graphql.js';
+import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { Separator } from '@/vdb/components/ui/separator.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';
+} from '@/components/ui/dropdown-menu.js';
+import { Separator } from '@/components/ui/separator.js';
 import { Plus } from 'lucide-react';
+import { Trans } from '@/lib/trans.js';
+import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
+import { api } from '@/graphql/api.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 
 export const promotionActionsDocument = graphql(
     `
@@ -34,7 +31,7 @@ interface PromotionActionsSelectorProps {
     onChange: (value: ConfigurableOperationInputType[]) => void;
 }
 
-export function PromotionActionsSelector({ value, onChange }: Readonly<PromotionActionsSelectorProps>) {
+export function PromotionActionsSelector({ value, onChange }: PromotionActionsSelectorProps) {
     const { data: actionsData } = useQuery({
         queryKey: ['promotionActions'],
         queryFn: () => api.query(promotionActionsDocument),

package/src/app/routes/_authenticated/_promotions/components/promotion-conditions-selector.tsx

@@ -1,22 +1,19 @@
-import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
-import { Button } from '@/vdb/components/ui/button.js';
+import { graphql } from '@/graphql/graphql.js';
+import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { Separator } from '@/vdb/components/ui/separator.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';
+} from '@/components/ui/dropdown-menu.js';
+import { Separator } from '@/components/ui/separator.js';
 import { Plus } from 'lucide-react';
+import { Trans } from '@/lib/trans.js';
+import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
+import { api } from '@/graphql/api.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 
 export const promotionConditionsDocument = graphql(
     `
@@ -34,7 +31,7 @@ interface PromotionConditionsSelectorProps {
     onChange: (value: ConfigurableOperationInputType[]) => void;
 }
 
-export function PromotionConditionsSelector({ value, onChange }: Readonly<PromotionConditionsSelectorProps>) {
+export function PromotionConditionsSelector({ value, onChange }: PromotionConditionsSelectorProps) {
     const { data: conditionsData } = useQuery({
         queryKey: ['promotionConditions'],
         queryFn: () => api.query(promotionConditionsDocument),

package/src/app/routes/_authenticated/_promotions/promotions.graphql.ts

@@ -1,5 +1,5 @@
-import { configurableOperationFragment } from '@/vdb/graphql/fragments.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
+import { configurableOperationFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
 
 export const promotionListDocument = graphql(`
     query PromotionList {
@@ -94,28 +94,3 @@ export const deletePromotionDocument = graphql(`
         }
     }
 `);
-
-export const assignPromotionsToChannelDocument = graphql(`
-    mutation AssignPromotionsToChannel($input: AssignPromotionsToChannelInput!) {
-        assignPromotionsToChannel(input: $input) {
-            id
-        }
-    }
-`);
-
-export const removePromotionsFromChannelDocument = graphql(`
-    mutation RemovePromotionsFromChannel($input: RemovePromotionsFromChannelInput!) {
-        removePromotionsFromChannel(input: $input) {
-            id
-        }
-    }
-`);
-
-export const deletePromotionsDocument = graphql(`
-    mutation DeletePromotions($ids: [ID!]!) {
-        deletePromotions(ids: $ids) {
-            result
-            message
-        }
-    }
-`);

package/src/app/routes/_authenticated/_promotions/promotions.tsx

@@ -1,18 +1,12 @@
-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 { 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 { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
-import {
-    AssignPromotionsToChannelBulkAction,
-    DeletePromotionsBulkAction,
-    DuplicatePromotionsBulkAction,
-    RemovePromotionsFromChannelBulkAction,
-} from './components/promotion-bulk-actions.js';
 import { deletePromotionDocument, promotionListDocument } from './promotions.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_promotions/promotions')({
@@ -51,24 +45,6 @@ function PromotionListPage() {
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
             }}
-            bulkActions={[
-                {
-                    order: 100,
-                    component: AssignPromotionsToChannelBulkAction,
-                },
-                {
-                    order: 200,
-                    component: RemovePromotionsFromChannelBulkAction,
-                },
-                {
-                    order: 300,
-                    component: DuplicatePromotionsBulkAction,
-                },
-                {
-                    order: 400,
-                    component: DeletePromotionsBulkAction,
-                },
-            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreatePromotion']}>

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -1,13 +1,13 @@
-import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
-import { RichTextInput } from '@/vdb/components/data-input/rich-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 { DateTimeInput } from '@/components/data-input/datetime-input.js';
+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 {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -17,10 +17,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} 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';
+} 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';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { PromotionActionsSelector } from './components/promotion-actions-selector.js';
@@ -31,12 +31,9 @@ import {
     updatePromotionDocument,
 } from './promotions.graphql.js';
 
-const pageId = 'promotion-detail';
-
 export const Route = createFileRoute('/_authenticated/_promotions/promotions_/$id')({
     component: PromotionDetailPage,
     loader: detailPageRouteLoader({
-        pageId,
         queryDocument: promotionDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -55,7 +52,6 @@ function PromotionDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        pageId,
         queryDocument: promotionDetailDocument,
         createDocument: createPromotionDocument,
         transformCreateInput: values => {
@@ -102,7 +98,7 @@ function PromotionDetailPage() {
                 toast.success(i18n.t('Successfully updated promotion'));
                 resetForm();
                 if (creatingNewEntity) {
-                    await navigate({ to: `../$id`, params: { id: data.id } });
+                    await navigate({ to: `../${data.id}`, from: Route.id });
                 }
             } else {
                 toast.error(i18n.t('Failed to update promotion'), {
@@ -118,7 +114,7 @@ function PromotionDetailPage() {
     });
 
     return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId="promotion-detail" form={form} submitHandler={submitHandler}>
             <PageTitle>{creatingNewEntity ? <Trans>New promotion</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_roles/components/expandable-permissions.tsx

@@ -1,5 +1,5 @@
-import { Badge } from '@/vdb/components/ui/badge.js';
-import { Button } from '@/vdb/components/ui/button.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -7,13 +7,13 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/vdb/components/ui/dialog.js';
-import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+} from '@/components/ui/dialog.js';
+import { ScrollArea } from '@/components/ui/scroll-area.js';
 import { ResultOf } from 'gql.tada';
 import { PlusIcon } from 'lucide-react';
 import { roleItemFragment } from '../roles.graphql.js';
 
-export function ExpandablePermissions({ role }: Readonly<{ role: ResultOf<typeof roleItemFragment> }>) {
+export function ExpandablePermissions({ role }: { role: ResultOf<typeof roleItemFragment> }) {
     const permissionsToPreview = role.permissions.slice(0, 3);
 
     return (

package/src/app/routes/_authenticated/_roles/components/permissions-grid.tsx

@@ -3,13 +3,13 @@ import {
     AccordionContent,
     AccordionItem,
     AccordionTrigger,
-} from '@/vdb/components/ui/accordion.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Switch } from '@/vdb/components/ui/switch.js';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
-import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
-import { ServerConfig } from '@/vdb/providers/server-config.js';
+} from "@/components/ui/accordion.js";
+import { Button } from '@/components/ui/button.js';
+import { Switch } from '@/components/ui/switch.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
+import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
+import { ServerConfig } from '@/providers/server-config.js';
+import { Trans, useLingui } from '@/lib/trans.js';
 import { useState } from 'react';
 
 interface PermissionsGridProps {
@@ -18,7 +18,7 @@ interface PermissionsGridProps {
     readonly?: boolean;
 }
 
-export function PermissionsGrid({ value, onChange, readonly = false }: Readonly<PermissionsGridProps>) {
+export function PermissionsGrid({ value, onChange, readonly = false }: PermissionsGridProps) {
     const { i18n } = useLingui();
     const groupedPermissions = useGroupedPermissions();
 
@@ -41,25 +41,24 @@ export function PermissionsGrid({ value, onChange, readonly = false }: Readonly<
 
     // Get default expanded sections based on which ones have active permissions
     const defaultExpandedSections = groupedPermissions
-        .map(section => ({
+        .map((section) => ({
             section,
             hasActivePermissions: section.permissions.some(permission => value.includes(permission.name)),
         }))
         .filter(({ hasActivePermissions }) => hasActivePermissions)
         .map(({ section }) => section.id);
-
+    
     const [accordionValue, setAccordionValue] = useState<string[]>(defaultExpandedSections);
 
     return (
         <div className="w-full">
-            <Accordion
-                type="multiple"
-                value={accordionValue.length ? accordionValue : defaultExpandedSections}
-                onValueChange={setAccordionValue}
-                className="space-y-4"
-            >
+            <Accordion type="multiple" value={accordionValue.length ? accordionValue : defaultExpandedSections} onValueChange={setAccordionValue} className="space-y-4">
                 {groupedPermissions.map((section, index) => (
-                    <AccordionItem key={index} value={section.id} className="border rounded-lg px-6">
+                    <AccordionItem
+                        key={index}
+                        value={section.id}
+                        className="border rounded-lg px-6"
+                    >
                         <AccordionTrigger className="hover:no-underline">
                             <div className="flex flex-col items-start gap-1 text-sm py-2">
                                 <div>{i18n.t(section.label)}</div>
@@ -95,10 +94,7 @@ export function PermissionsGrid({ value, onChange, readonly = false }: Readonly<
                                             <TooltipProvider>
                                                 <Tooltip>
                                                     <TooltipTrigger asChild>
-                                                        <label
-                                                            htmlFor={permission.name}
-                                                            className="text-sm whitespace-nowrap"
-                                                        >
+                                                        <label htmlFor={permission.name} className="text-sm whitespace-nowrap">
                                                             {i18n.t(permission.name)}
                                                         </label>
                                                     </TooltipTrigger>

package/src/app/routes/_authenticated/_roles/roles.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/vdb/graphql/graphql.js';
+import { graphql } from '@/graphql/graphql.js';
 
 export const roleItemFragment = graphql(`
     fragment RoleItem on Role {
@@ -65,12 +65,3 @@ export const deleteRoleDocument = graphql(`
         }
     }
 `);
-
-export const deleteRolesDocument = graphql(`
-    mutation DeleteRoles($ids: [ID!]!) {
-        deleteRoles(ids: $ids) {
-            result
-            message
-        }
-    }
-`);