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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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