@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -1,35 +1,44 @@
-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";
-
-type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
+import { TableCell, TableRow } from '@/vdb/components/ui/table.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { Order } from '../utils/order-types.js';
+import { MoneyGrossNet } from './money-gross-net.js';
 
 export interface OrderTableTotalsProps {
-    order: OrderFragment;
+    order: Order;
     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 +46,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 +58,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,14 +1,19 @@
-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 {
-    ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    VisibilityState,
-} from '@tanstack/react-table';
-import { useState } from 'react';
+import { Money } from '@/vdb/components/data-display/money.js';
+import { getColumnVisibility } from '@/vdb/components/data-table/data-table-utils.js';
+import { DataTable } from '@/vdb/components/data-table/data-table.js';
+import { useGeneratedColumns } from '@/vdb/components/data-table/use-generated-columns.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/vdb/components/ui/dropdown-menu.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { getFieldsFromDocumentNode } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { JsonEditor } from 'json-edit-react';
+import { EllipsisVertical } from 'lucide-react';
+import { useMemo } from 'react';
 import { orderDetailDocument, orderLineFragment } from '../orders.graphql.js';
 import { MoneyGrossNet } from './money-gross-net.js';
 import { OrderTableTotals } from './order-table-totals.js';
@@ -18,111 +23,167 @@ type OrderLineFragment = ResultOf<typeof orderLineFragment>;
 
 export interface OrderTableProps {
     order: OrderFragment;
+    pageId: string;
 }
 
-export function OrderTable({ order }: OrderTableProps) {
-    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-
-    const currencyCode = order.currencyCode;
-
-    const columns: ColumnDef<OrderLineFragment>[] = [
-        {
-            header: 'Image',
+// Factory function to create customizeColumns with inline components
+function createCustomizeColumns(currencyCode: string) {
+    return {
+        featuredAsset: {
+            header: () => <Trans>Image</Trans>,
             accessorKey: 'featuredAsset',
-            cell: ({ row }) => {
+            cell: ({ row }: { row: any }) => {
                 const asset = row.original.featuredAsset;
                 return <VendureImage asset={asset} preset="tiny" />;
             },
         },
-        {
-            header: 'Product',
-            accessorKey: 'productVariant.name',
-        },
-        {
-            header: 'SKU',
-            accessorKey: 'productVariant.sku',
+        productVariant: {
+            header: () => <Trans>Product</Trans>,
+            cell: ({ row }: { row: any }) => {
+                const productVariant = row.original.productVariant;
+                return (
+                    <DetailPageButton
+                        id={productVariant.id}
+                        label={productVariant.name}
+                        href={`/product-variants/${productVariant.id}`}
+                    />
+                );
+            },
         },
-        {
-            header: 'Unit price',
+        unitPriceWithTax: {
+            header: () => <Trans>Unit price</Trans>,
             accessorKey: 'unitPriceWithTax',
-            cell: ({ cell, row }) => {
+            cell: ({ row }: { row: any }) => {
                 const value = row.original.unitPriceWithTax;
                 const netValue = row.original.unitPrice;
                 return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
             },
         },
-        {
-            header: 'Quantity',
+        fulfillmentLines: {
+            cell: ({ row }: { row: any }) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                            <EllipsisVertical />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <JsonEditor data={row.original.fulfillmentLines} viewOnly rootFontSize={12} />
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+        },
+        quantity: {
+            header: () => <Trans>Quantity</Trans>,
             accessorKey: 'quantity',
         },
-        {
-            header: 'Total',
+        unitPrice: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.unitPrice} />
+            ),
+        },
+        proratedUnitPrice: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.proratedUnitPrice} />
+            ),
+        },
+        proratedUnitPriceWithTax: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.proratedUnitPriceWithTax} />
+            ),
+        },
+        linePrice: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.linePrice} />
+            ),
+        },
+        discountedLinePrice: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.discountedLinePrice} />
+            ),
+        },
+        lineTax: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.lineTax} />
+            ),
+        },
+        linePriceWithTax: {
+            header: () => <Trans>Total</Trans>,
             accessorKey: 'linePriceWithTax',
-            cell: ({ cell, row }) => {
+            cell: ({ row }: { row: any }) => {
                 const value = row.original.linePriceWithTax;
                 const netValue = row.original.linePrice;
                 return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
             },
         },
+        discountedLinePriceWithTax: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.discountedLinePriceWithTax} />
+            ),
+        },
+    };
+}
+
+export function OrderTable({ order, pageId }: Readonly<OrderTableProps>) {
+    const { setTableSettings, settings } = useUserSettings();
+    const tableSettings = pageId ? settings.tableSettings?.[pageId] : undefined;
+
+    const defaultColumnVisibility = tableSettings?.columnVisibility ?? {
+        featuredAsset: true,
+        productVariant: true,
+        unitPriceWithTax: true,
+        quantity: true,
+        linePriceWithTax: true,
+    };
+    const columnOrder = tableSettings?.columnOrder ?? [
+        'featuredAsset',
+        'productVariant',
+        'unitPriceWithTax',
+        'quantity',
+        'linePriceWithTax',
     ];
+    const currencyCode = order.currencyCode;
 
-    const data = order.lines;
+    const fields = getFieldsFromDocumentNode(addCustomFields(orderDetailDocument), ['order', 'lines']);
 
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        rowCount: data.length,
-        onColumnVisibilityChange: setColumnVisibility,
-        state: {
-            columnVisibility,
-        },
+    const customizeColumns = useMemo(() => createCustomizeColumns(currencyCode), [currencyCode]);
+
+    const { columns, customFieldColumnNames } = useGeneratedColumns({
+        fields,
+        rowActions: [],
+        customizeColumns: customizeColumns as any,
+        deleteMutation: undefined,
+        defaultColumnOrder: columnOrder,
+        additionalColumns: {},
+        includeSelectionColumn: false,
+        includeActionsColumn: false,
+        enableSorting: false,
     });
 
+    const columnVisibility = getColumnVisibility(fields, defaultColumnVisibility, customFieldColumnNames);
+    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
+    const data = order.lines;
+
     return (
         <div className="w-full">
-            <div className="">
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map(headerGroup => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map(header => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </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>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell colSpan={columns.length} className="h-24 text-center">
-                                    No results.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                        <OrderTableTotals order={order} columnCount={columns.length} />
-                    </TableBody>
-                </Table>
-            </div>
+            <DataTable
+                columns={columns as any}
+                data={data as any}
+                totalItems={data.length}
+                disableViewOptions={false}
+                defaultColumnVisibility={columnVisibility}
+                onColumnVisibilityChange={(_, columnVisibility) => {
+                    setTableSettings(pageId, 'columnVisibility', columnVisibility);
+                }}
+                setTableOptions={options => ({
+                    ...options,
+                    manualPagination: false,
+                    manualSorting: false,
+                    manualFiltering: false,
+                })}
+            >
+                <OrderTableTotals order={order} columnCount={visibleColumnCount} />
+            </DataTable>
         </div>
     );
 }

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

@@ -1,39 +1,40 @@
-import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table.js";
-import { Trans } from "@/lib/trans";
-import { orderDetailFragment } from "../orders.graphql.js";
-import { ResultOf } from "gql.tada";
-import { useLocalFormat } from "@/hooks/use-local-format.js";
+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.js';
+import { Order } from '../utils/order-types.js';
 
-export function OrderTaxSummary({ order }: { order: ResultOf<typeof orderDetailFragment> }) {
+export function OrderTaxSummary({ order }: Readonly<{ order: Order }>) {
     const { formatCurrency } = useLocalFormat();
-    return <div>
-        <Table>
-            <TableHeader>
-                <TableRow>
-                    <TableHead>
-                        <Trans>Description</Trans>
-                    </TableHead>
-                    <TableHead>
-                        <Trans>Tax rate</Trans>
-                    </TableHead>
-                    <TableHead>
-                        <Trans>Tax base</Trans>
-                    </TableHead>
-                    <TableHead>
-                        <Trans>Tax total</Trans>
-                    </TableHead>
-                </TableRow>
-            </TableHeader>
-            <TableBody>
-                {order.taxSummary.map(taxLine => (
-                    <TableRow key={taxLine.description}>
-                        <TableCell>{taxLine.description}</TableCell>
-                        <TableCell>{taxLine.taxRate}%</TableCell>
-                        <TableCell>{formatCurrency(taxLine.taxBase, order.currencyCode)}</TableCell>
-                        <TableCell>{formatCurrency(taxLine.taxTotal, order.currencyCode)}</TableCell>
+    return (
+        <div>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>
+                            <Trans>Description</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax rate</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax base</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax total</Trans>
+                        </TableHead>
                     </TableRow>
-                ))}
-            </TableBody>
-        </Table>
-    </div>
-}
+                </TableHeader>
+                <TableBody>
+                    {order.taxSummary.map(taxLine => (
+                        <TableRow key={taxLine.description}>
+                            <TableCell>{taxLine.description}</TableCell>
+                            <TableCell>{taxLine.taxRate}%</TableCell>
+                            <TableCell>{formatCurrency(taxLine.taxBase, order.currencyCode)}</TableCell>
+                            <TableCell>{formatCurrency(taxLine.taxTotal, order.currencyCode)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}