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

package/README.md

@@ -1,13 +1,50 @@
 # Vendure Dashboard
 
-This is an admin dashboard for managing Vendure applications. It is designed to supersede the existing Admin UI.
-
-Current status: early work in progress
+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.
 
 ## 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 tests once, or `npx vitest` to run tests in watch mode
+Run `npm run test` to run tests once, or `npx vitest` to run tests in watch mode

package/dist/plugin/vite-plugin-config.js

@@ -7,7 +7,7 @@ export function viteConfigPlugin({ packageRoot }) {
             // Only set the vite `root` to the dashboard package when running the dev server.
             // During a production build we still need to reference the dashboard source which
             // lives in `node_modules`, but we don't want the build output to be emitted in there.
-            // Therefore we set `root` only for `serve` and, for `build`, we instead make sure that
+            // Therefore, we set `root` only for `serve` and, for `build`, we instead make sure that
             // an `outDir` **outside** of `node_modules` is used (defaulting to the current working
             // directory if the user did not provide one already).
             config.root = packageRoot;
@@ -26,7 +26,9 @@ export function viteConfigPlugin({ packageRoot }) {
                 config.build = Object.assign(Object.assign({}, buildConfig), { outDir: normalizedOutDir });
             }
             config.resolve = {
-                alias: Object.assign(Object.assign({}, ((_c = (_b = config.resolve) === null || _b === void 0 ? void 0 : _b.alias) !== null && _c !== void 0 ? _c : {})), { '@/vdb': path.resolve(packageRoot, './src/lib'), '@/graphql': path.resolve(packageRoot, './src/lib/graphql') }),
+                alias: Object.assign(Object.assign({}, ((_c = (_b = config.resolve) === null || _b === void 0 ? void 0 : _b.alias) !== null && _c !== void 0 ? _c : {})), { 
+                    // See the readme for an explanation of this alias.
+                    '@/vdb': path.resolve(packageRoot, './src/lib'), '@/graphql': path.resolve(packageRoot, './src/lib/graphql') }),
             };
             // This is required to prevent Vite from pre-bundling the
             // dashboard source when it resides in node_modules.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507021511",
+  "version": "3.3.6-master-202507030234",
   "type": "module",
   "repository": {
     "type": "git",
@@ -86,8 +86,8 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.3.6-master-202507021511",
-    "@vendure/core": "^3.3.6-master-202507021511",
+    "@vendure/common": "^3.3.6-master-202507030234",
+    "@vendure/core": "^3.3.6-master-202507030234",
     "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "330b6000902c451a4646f4f8d0ec87e9093c327c"
+  "gitHead": "ca527d7a89a9cff83d965e384e5f3d27c24efe82"
 }

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

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

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

@@ -28,7 +28,7 @@ interface RolePermissionsDisplayProps {
     value: string[];
 }
 
-export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayProps) {
+export function RolePermissionsDisplay({ value = [] }: Readonly<RolePermissionsDisplayProps>) {
     const { i18n } = useLingui();
     const groupedPermissions = useGroupedPermissions();
 

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

@@ -1,6 +1,6 @@
-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';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
 
 export const DeleteChannelsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
     return (

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

@@ -2,9 +2,8 @@ import { useQueryClient } from '@tanstack/react-query';
 
 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 { BulkActionComponent, useChannel } from '@/vdb/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {

package/src/app/routes/_authenticated/_collections/components/collection-contents-table.tsx

@@ -28,7 +28,7 @@ export interface CollectionContentsTableProps {
     collectionId?: string;
 }
 
-export function CollectionContentsTable({ collectionId }: CollectionContentsTableProps) {
+export function CollectionContentsTable({ collectionId }: Readonly<CollectionContentsTableProps>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);

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

@@ -19,7 +19,7 @@ export interface CollectionFiltersSelectorProps {
     onChange: (filters: ConfigurableOperationInputType[]) => void;
 }
 
-export function CollectionFiltersSelector({ value, onChange }: CollectionFiltersSelectorProps) {
+export function CollectionFiltersSelector({ value, onChange }: Readonly<CollectionFiltersSelectorProps>) {
     const { data: filtersData } = useQuery(getCollectionFiltersQueryOptions);
 
     const filters = filtersData?.collectionFilters;

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

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

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

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+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';
 

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

@@ -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

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

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

@@ -10,7 +10,7 @@ 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-order-table.tsx

@@ -11,7 +11,7 @@ interface CustomerOrderTableProps {
     customerId: string;
 }
 
-export function CustomerOrderTable({ customerId }: CustomerOrderTableProps) {
+export function CustomerOrderTable({ customerId }: Readonly<CustomerOrderTableProps>) {
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [sorting, setSorting] = useState<SortingState>([{ id: 'orderPlacedAt', desc: true }]);

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

@@ -8,7 +8,7 @@ export interface CustomerStatusBadgeProps {
     user?: { verified: boolean } | null;
 }
 
-export function CustomerStatusBadge({ user }: CustomerStatusBadgeProps) {
+export function CustomerStatusBadge({ user }: Readonly<CustomerStatusBadgeProps>) {
     const status = user ? (user.verified ? 'verified' : 'registered') : 'guest';
     return (
         <Badge variant="outline">

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

@@ -40,7 +40,7 @@ export interface EditFacetValueProps {
     onSuccess?: () => void;
 }
 
-export function EditFacetValue({ facetValueId, onSuccess }: EditFacetValueProps) {
+export function EditFacetValue({ facetValueId, onSuccess }: Readonly<EditFacetValueProps>) {
     const {
         settings: { contentLanguage },
     } = useUserSettings();

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

@@ -2,10 +2,9 @@ import { toast } from 'sonner';
 
 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 { BulkActionComponent, 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';

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

@@ -17,7 +17,7 @@ export interface FacetValuesSheetProps {
     children?: React.ReactNode;
 }
 
-export function FacetValuesSheet({ facetName, facetId, children }: FacetValuesSheetProps) {
+export function FacetValuesSheet({ facetName, facetId, children }: Readonly<FacetValuesSheetProps>) {
     return (
         <Sheet>
             <SheetTrigger asChild>

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

@@ -28,7 +28,7 @@ export interface FacetValuesTableProps {
     facetId: string;
 }
 
-export function FacetValuesTable({ facetId }: FacetValuesTableProps) {
+export function FacetValuesTable({ facetId }: Readonly<FacetValuesTableProps>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);

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

@@ -31,7 +31,7 @@ interface CustomerAddressSelectorProps {
     onSelect: (address: ResultOf<typeof addressFragment>) => void;
 }
 
-export function CustomerAddressSelector({ customerId, onSelect }: CustomerAddressSelectorProps) {
+export function CustomerAddressSelector({ customerId, onSelect }: Readonly<CustomerAddressSelectorProps>) {
     const { i18n } = useLingui();
     const [open, setOpen] = useState(false);
 

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

@@ -6,7 +6,7 @@ export interface MoneyGrossNetProps {
     currencyCode: string;
 }
 
-export function MoneyGrossNet({ priceWithTax, price, currencyCode }: MoneyGrossNetProps) {
+export function MoneyGrossNet({ priceWithTax, price, currencyCode }: Readonly<MoneyGrossNetProps>) {
     return (
         <div className="flex flex-col gap-1">
             <div>

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

@@ -5,7 +5,7 @@ import { orderAddressFragment } from '../orders.graphql.js';
 
 type OrderAddress = ResultOf<typeof orderAddressFragment>;
 
-export function OrderAddress({ address }: { address?: OrderAddress }) {
+export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>) {
     if (!address) {
         return null;
     }

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

@@ -10,7 +10,7 @@ interface OrderHistoryContainerProps {
     orderId: string;
 }
 
-export function OrderHistoryContainer({ orderId }: OrderHistoryContainerProps) {
+export function OrderHistoryContainer({ orderId }: Readonly<OrderHistoryContainerProps>) {
     const {
         historyEntries,
         order,

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

@@ -17,7 +17,12 @@ interface OrderHistoryProps {
     onDeleteNote?: (entryId: string) => void;
 }
 
-export function OrderHistory({ historyEntries, onAddNote, onUpdateNote, onDeleteNote }: OrderHistoryProps) {
+export function OrderHistory({
+    historyEntries,
+    onAddNote,
+    onUpdateNote,
+    onDeleteNote,
+}: Readonly<OrderHistoryProps>) {
     const getTimelineIcon = (entry: OrderHistoryProps['historyEntries'][0]) => {
         switch (entry.type) {
             case 'ORDER_PAYMENT_TRANSITION':

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

@@ -10,7 +10,7 @@ interface OrderLineCustomFieldsFormProps {
     form: UseFormReturn<any>;
 }
 
-export function OrderLineCustomFieldsForm({ onUpdate, form }: OrderLineCustomFieldsFormProps) {
+export function OrderLineCustomFieldsForm({ onUpdate, form }: Readonly<OrderLineCustomFieldsFormProps>) {
     const onSubmit = (values: any) => {
         onUpdate(values.input?.customFields);
     };

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

@@ -11,14 +11,14 @@ export interface OrderTableTotalsProps {
     columnCount: number;
 }
 
-export function OrderTableTotals({ order, columnCount }: OrderTableTotalsProps) {
+export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
     const currencyCode = order.currencyCode;
 
     return (
         <>
             {order.discounts?.length > 0
-                ? order.discounts.map(discount => (
-                      <TableRow>
+                ? order.discounts.map((discount, index) => (
+                      <TableRow key={`${discount.description}-${index}`}>
                           <TableCell colSpan={columnCount - 1} className="h-12">
                               <Trans>Discount</Trans>: {discount.description}
                           </TableCell>

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

@@ -20,7 +20,7 @@ export interface OrderTableProps {
     order: OrderFragment;
 }
 
-export function OrderTable({ order }: OrderTableProps) {
+export function OrderTable({ order }: Readonly<OrderTableProps>) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
 
     const currencyCode = order.currencyCode;

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

@@ -1,10 +1,10 @@
 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 { Trans } from '@/vdb/lib/trans.js';
 import { ResultOf } from 'gql.tada';
 import { orderDetailFragment } from '../orders.graphql.js';
 
-export function OrderTaxSummary({ order }: { order: ResultOf<typeof orderDetailFragment> }) {
+export function OrderTaxSummary({ order }: Readonly<{ order: ResultOf<typeof orderDetailFragment> }>) {
     const { formatCurrency } = useLocalFormat();
     return (
         <div>

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

@@ -8,7 +8,7 @@ type PaymentDetailsProps = {
     currencyCode: string;
 };
 
-export function PaymentDetails({ payment, currencyCode }: PaymentDetailsProps) {
+export function PaymentDetails({ payment, currencyCode }: Readonly<PaymentDetailsProps>) {
     const { formatCurrency, formatDate } = useLocalFormat();
     const t = (key: string) => key;
 

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

@@ -20,7 +20,7 @@ export function ShippingMethodSelector({
     selectedShippingMethodId,
     currencyCode,
     onSelect,
-}: ShippingMethodSelectorProps) {
+}: Readonly<ShippingMethodSelectorProps>) {
     return (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {eligibleShippingMethods?.length ? (

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

@@ -33,7 +33,7 @@ interface PaymentHandlerSelectorProps {
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
 }
 
-export function PaymentHandlerSelector({ value, onChange }: PaymentHandlerSelectorProps) {
+export function PaymentHandlerSelector({ value, onChange }: Readonly<PaymentHandlerSelectorProps>) {
     const { data: handlersData } = useQuery({
         queryKey: ['paymentMethodHandlers'],
         queryFn: () => api.query(paymentHandlersDocument),

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

@@ -1,8 +1,7 @@
 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 { BulkActionComponent, useChannel } from '@/vdb/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
 import {

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

@@ -5,9 +5,8 @@ import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-
 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 { BulkActionComponent, useChannel, usePaginatedList } from '@/vdb/index.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 

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

@@ -97,7 +97,10 @@ interface CreateProductVariantsProps {
     onChange?: ({ data }: { data: VariantConfiguration }) => void;
 }
 
-export function CreateProductVariants({ currencyCode = 'USD', onChange }: CreateProductVariantsProps) {
+export function CreateProductVariants({
+    currencyCode = 'USD',
+    onChange,
+}: Readonly<CreateProductVariantsProps>) {
     const { data: stockLocationsResult } = useQuery({
         queryKey: ['stockLocations'],
         queryFn: () => api.query(getStockLocationsDocument, { options: { take: 100 } }),

package/src/app/routes/_authenticated/_products/components/option-value-input.tsx

@@ -32,7 +32,11 @@ interface OptionValueInputProps {
     disabled?: boolean;
 }
 
-export function OptionValueInput({ groupName, groupIndex, disabled = false }: OptionValueInputProps) {
+export function OptionValueInput({
+    groupName,
+    groupIndex,
+    disabled = false,
+}: Readonly<OptionValueInputProps>) {
     const { control, watch } = useFormContext<FormValues>();
     const { fields, append, remove } = useFieldArray({
         control,

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

@@ -5,9 +5,8 @@ import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-
 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 { BulkActionComponent, 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';

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

@@ -33,7 +33,12 @@ interface ProductOptionSelectProps {
     onCreateOption: (name: string) => void;
 }
 
-export function ProductOptionSelect({ group, value, onChange, onCreateOption }: ProductOptionSelectProps) {
+export function ProductOptionSelect({
+    group,
+    value,
+    onChange,
+    onCreateOption,
+}: Readonly<ProductOptionSelectProps>) {
     const [open, setOpen] = useState(false);
     const [newOptionInput, setNewOptionInput] = useState('');
     const { i18n } = useLingui();

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

@@ -34,7 +34,7 @@ interface PromotionActionsSelectorProps {
     onChange: (value: ConfigurableOperationInputType[]) => void;
 }
 
-export function PromotionActionsSelector({ value, onChange }: PromotionActionsSelectorProps) {
+export function PromotionActionsSelector({ value, onChange }: Readonly<PromotionActionsSelectorProps>) {
     const { data: actionsData } = useQuery({
         queryKey: ['promotionActions'],
         queryFn: () => api.query(promotionActionsDocument),

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

@@ -1,8 +1,7 @@
 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 { BulkActionComponent, useChannel } from '@/vdb/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 

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

@@ -34,7 +34,7 @@ interface PromotionConditionsSelectorProps {
     onChange: (value: ConfigurableOperationInputType[]) => void;
 }
 
-export function PromotionConditionsSelector({ value, onChange }: PromotionConditionsSelectorProps) {
+export function PromotionConditionsSelector({ value, onChange }: Readonly<PromotionConditionsSelectorProps>) {
     const { data: conditionsData } = useQuery({
         queryKey: ['promotionConditions'],
         queryFn: () => api.query(promotionConditionsDocument),

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

@@ -13,7 +13,7 @@ import { ResultOf } from 'gql.tada';
 import { PlusIcon } from 'lucide-react';
 import { roleItemFragment } from '../roles.graphql.js';
 
-export function ExpandablePermissions({ role }: { role: ResultOf<typeof roleItemFragment> }) {
+export function ExpandablePermissions({ role }: Readonly<{ role: ResultOf<typeof roleItemFragment> }>) {
     const permissionsToPreview = role.permissions.slice(0, 3);
 
     return (

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

@@ -18,7 +18,7 @@ interface PermissionsGridProps {
     readonly?: boolean;
 }
 
-export function PermissionsGrid({ value, onChange, readonly = false }: PermissionsGridProps) {
+export function PermissionsGrid({ value, onChange, readonly = false }: Readonly<PermissionsGridProps>) {
     const { i18n } = useLingui();
     const groupedPermissions = useGroupedPermissions();
 

package/src/app/routes/_authenticated/_roles/components/role-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteRolesDocument } from '../roles.graphql.js';
 

package/src/app/routes/_authenticated/_sellers/components/seller-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteSellersDocument } from '../sellers.graphql.js';
 

package/src/app/routes/_authenticated/_shipping-methods/components/fulfillment-handler-selector.tsx

@@ -20,7 +20,7 @@ interface FulfillmentHandlerSelectorProps {
     onChange: (value: string | undefined) => void;
 }
 
-export function FulfillmentHandlerSelector({ value, onChange }: FulfillmentHandlerSelectorProps) {
+export function FulfillmentHandlerSelector({ value, onChange }: Readonly<FulfillmentHandlerSelectorProps>) {
     const { data: fulfillmentHandlersData } = useQuery({
         queryKey: ['fulfillmentHandlers'],
         queryFn: () => api.query(fulfillmentHandlersDocument),

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-calculator-selector.tsx

@@ -33,7 +33,7 @@ interface ShippingCalculatorSelectorProps {
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
 }
 
-export function ShippingCalculatorSelector({ value, onChange }: ShippingCalculatorSelectorProps) {
+export function ShippingCalculatorSelector({ value, onChange }: Readonly<ShippingCalculatorSelectorProps>) {
     const { data: calculatorsData } = useQuery({
         queryKey: ['shippingCalculators'],
         queryFn: () => api.query(shippingCalculatorsDocument),

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-method-bulk-actions.tsx

@@ -1,8 +1,7 @@
 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 { BulkActionComponent, useChannel } from '@/vdb/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
 import {

package/src/app/routes/_authenticated/_stock-locations/components/stock-location-bulk-actions.tsx

@@ -1,8 +1,7 @@
 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 { BulkActionComponent, useChannel } from '@/vdb/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
 import {

package/src/app/routes/_authenticated/_system/components/payload-dialog.tsx

@@ -16,7 +16,7 @@ type PayloadDialogProps = {
     description?: string | React.ReactNode;
 };
 
-export function PayloadDialog({ payload, trigger, title, description }: PayloadDialogProps) {
+export function PayloadDialog({ payload, trigger, title, description }: Readonly<PayloadDialogProps>) {
     return (
         <Dialog>
             <DialogTrigger asChild>{trigger}</DialogTrigger>