@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/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,18 +15,21 @@ 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 { countryDetailQuery, createCountryDocument, updateCountryDocument } from './countries.graphql.js';
+import { countryDetailDocument, createCountryDocument, updateCountryDocument } from './countries.graphql.js';
+
+const pageId = 'country-detail';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries_/$id')({
     component: CountryDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: countryDetailQuery,
+        pageId,
+        queryDocument: countryDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/countries', label: 'Countries' },
             isNew ? <Trans>New country</Trans> : entity?.name,
@@ -41,8 +44,9 @@ function CountryDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
-        queryDocument: countryDetailQuery,
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: countryDetailDocument,
         createDocument: createCountryDocument,
         updateDocument: updateCountryDocument,
         setValuesForUpdate: entity => {
@@ -71,7 +75,7 @@ function CountryDetailPage() {
     });
 
     return (
-        <Page pageId="country-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New country</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteCustomerGroupsDocument } from '../customer-groups.graphql.js';
+
+export const DeleteCustomerGroupsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteCustomerGroupsDocument}
+            entityName="customer groups"
+            requiredPermissions={['DeleteCustomerGroup']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/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">

package/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>}
                 />
             )}

package/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) {
@@ -33,7 +33,7 @@ export const removeCustomersFromGroupDocument = graphql(`
     }
 `);
 
-export const customerGroupDocument = graphql(`
+export const customerGroupDetailDocument = graphql(`
     query CustomerGroup($id: ID!) {
         customerGroup(id: $id) {
             id
@@ -69,3 +69,12 @@ export const deleteCustomerGroupDocument = graphql(`
         }
     }
 `);
+
+export const deleteCustomerGroupsDocument = graphql(`
+    mutation DeleteCustomerGroups($ids: [ID!]!) {
+        deleteCustomerGroups(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_customer-groups/customer-groups.tsx

@@ -1,11 +1,12 @@
-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';
 import { CustomerGroupMembersSheet } from './components/customer-group-members-sheet.js';
 import { customerGroupListDocument, deleteCustomerGroupDocument } from './customer-groups.graphql.js';
 
@@ -52,6 +53,12 @@ function CustomerGroupListPage() {
                     name: { contains: searchTerm },
                 };
             }}
+            bulkActions={[
+                {
+                    component: DeleteCustomerGroupsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCustomerGroup']}>

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

@@ -1,10 +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 { addCustomFields } from '@/framework/document-introspection/add-custom-fields.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,
@@ -14,23 +13,26 @@ 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';
 import {
     createCustomerGroupDocument,
-    customerGroupDocument,
+    customerGroupDetailDocument,
     updateCustomerGroupDocument,
 } from './customer-groups.graphql.js';
 
+const pageId = 'customer-group-detail';
+
 export const Route = createFileRoute('/_authenticated/_customer-groups/customer-groups_/$id')({
     component: CustomerGroupDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: customerGroupDocument,
+        pageId,
+        queryDocument: customerGroupDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/customer-groups', label: 'Customer groups' },
             isNew ? <Trans>New customer group</Trans> : entity?.name,
@@ -46,7 +48,8 @@ function CustomerGroupDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        queryDocument: addCustomFields(customerGroupDocument),
+        pageId,
+        queryDocument: customerGroupDetailDocument,
         createDocument: createCustomerGroupDocument,
         updateDocument: updateCustomerGroupDocument,
         setValuesForUpdate: entity => {
@@ -72,7 +75,7 @@ function CustomerGroupDetailPage() {
     });
 
     return (
-        <Page pageId="customer-group-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New customer group</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/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>
                     )}

package/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';
 
@@ -58,7 +58,7 @@ interface CustomerAddressFormProps {
     onCancel?: () => void;
 }
 
-export function CustomerAddressForm({ address, onSubmit, onCancel }: CustomerAddressFormProps) {
+export function CustomerAddressForm({ address, onSubmit, onCancel }: Readonly<CustomerAddressFormProps>) {
     const { i18n } = useLingui();
 
     // Fetch available countries

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

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteCustomersDocument } from '../customers.graphql.js';
+
+export const DeleteCustomersBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteCustomersDocument}
+            entityName="customers"
+            requiredPermissions={['DeleteCustomer']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

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

@@ -1,16 +1,16 @@
-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;
 }
 
-export function CustomerHistoryContainer({ customerId }: CustomerHistoryContainerProps) {
+export function CustomerHistoryContainer({ customerId }: Readonly<CustomerHistoryContainerProps>) {
     const {
         historyEntries,
         customer,

package/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>
     );

package/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';