@vendure/dashboard 3.5.0-minor-202509261210 → 3.5.0-minor-202510031341

package/src/lib/components/shared/facet-value-selector.tsx

@@ -10,7 +10,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { ChevronRight, Loader2, Plus } from 'lucide-react';
@@ -41,9 +41,9 @@ interface FacetValueSelectorProps {
     /**
      * @description
      * The function to call when a facet value is selected.
-     * 
+     *
      * The `value` will have the following structure:
-     * 
+     *
      * ```ts
      * {
      *     id: string;
@@ -71,7 +71,7 @@ interface FacetValueSelectorProps {
     /**
      * @description
      * The number of facet values to display per page.
-     * 
+     *
      * @default 4
      */
     pageSize?: number;
@@ -129,7 +129,7 @@ const getFacetValuesForFacetDocument = graphql(`
 /**
  * @description
  * A component for selecting facet values.
- * 
+ *
  * @example
  * ```tsx
  * <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={disabled} />
@@ -141,11 +141,11 @@ const getFacetValuesForFacetDocument = graphql(`
  * @since 3.4.0
  */
 export function FacetValueSelector({
-    onValueSelect,
-    disabled,
-    placeholder = 'Search facet values...',
-    pageSize = 4,
-}: FacetValueSelectorProps) {
+                                       onValueSelect,
+                                       disabled,
+                                       placeholder = 'Search facet values...',
+                                       pageSize = 4,
+                                   }: FacetValueSelectorProps) {
     const [open, setOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const [expandedFacetId, setExpandedFacetId] = useState<string | null>(null);

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from '@/vdb/components/ui/checkbox.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 interface HistoryNoteCheckboxProps {
     value: boolean;

package/src/lib/components/shared/history-timeline/history-note-editor.tsx

@@ -8,7 +8,7 @@ import {
     DialogTitle,
 } from '@/vdb/components/ui/dialog.js';
 import { Textarea } from '@/vdb/components/ui/textarea.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 

package/src/lib/components/shared/history-timeline/history-note-entry.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { Separator } from '@/vdb/components/ui/separator.js';
 import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
 
 interface HistoryNoteEntryProps extends Readonly<HistoryEntryProps> {

package/src/lib/components/shared/language-selector.tsx

@@ -1,7 +1,7 @@
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { MultiSelect } from './multi-select.js';
 
@@ -28,7 +28,7 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
     });
     const { formatLanguageName } = useLocalFormat();
     const { value, onChange, multiple, availableLanguageCodes } = props;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const items = (availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? []).map(language => ({
         value: language,
@@ -41,8 +41,8 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
             onChange={onChange}
             multiple={multiple}
             items={items}
-            placeholder={i18n.t('Select a language')}
-            searchPlaceholder={i18n.t('Search languages...')}
+            placeholder={t`Select a language`}
+            searchPlaceholder={t`Search languages...`}
         />
     );
 }

package/src/lib/components/shared/navigation-confirmation.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useBlocker } from '@tanstack/react-router';
 import { UseFormReturn } from 'react-hook-form';
 

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -14,7 +14,7 @@ import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { ColumnFiltersState, ColumnSort, SortingState, Table } from '@tanstack/react-table';
 import { ColumnDef, Row, TableOptions, VisibilityState } from '@tanstack/table-core';
 import React from 'react';
-import { getColumnVisibility } from '../data-table/data-table-utils.js';
+import { getColumnVisibility, getStandardizedDefaultColumnOrder } from '../data-table/data-table-utils.js';
 import { useGeneratedColumns } from '../data-table/use-generated-columns.js';
 
 // Type that identifies a paginated list structure (has items array and totalItems)
@@ -89,21 +89,25 @@ export type AllItemFieldKeys<T extends TypedDocumentNode<any, any>> =
     | keyof PaginatedListItemFields<T>
     | CustomFieldKeysOfItem<PaginatedListItemFields<T>>;
 
-export type CustomizeColumnConfig<T extends TypedDocumentNode<any, any>> = {
-    [Key in AllItemFieldKeys<T>]?: Partial<ColumnDef<PaginatedListItemFields<T>, any>> & {
-        meta?: {
-            /**
-             * @description
-             * Columns that rely on _other_ columns in order to correctly render,
-             * can declare those other columns as dependencies in order to ensure that
-             * those columns are always fetched, even when those columns are not explicitly
-             * included in the visible table columns.
-             */
-            dependencies?: Array<AllItemFieldKeys<T>>;
-        };
+export type ColumnDefWithMetaDependencies<T extends TypedDocumentNode<any, any>> = Partial<
+    ColumnDef<T, any>
+> & {
+    meta?: {
+        /**
+         * @description
+         * Columns that rely on _other_ columns in order to correctly render,
+         * can declare those other columns as dependencies in order to ensure that
+         * those columns are always fetched, even when those columns are not explicitly
+         * included in the visible table columns.
+         */
+        dependencies?: Array<AllItemFieldKeys<T>>;
     };
 };
 
+export type CustomizeColumnConfig<T extends TypedDocumentNode<any, any>> = {
+    [Key in AllItemFieldKeys<T>]?: ColumnDefWithMetaDependencies<PaginatedListItemFields<T>>;
+};
+
 export type FacetedFilterConfig<T extends TypedDocumentNode<any, any>> = {
     [Key in AllItemFieldKeys<T>]?: FacetedFilter;
 };
@@ -145,7 +149,7 @@ export type ListQueryOptionsShape = {
 };
 
 export type AdditionalColumns<T extends TypedDocumentNode<any, any>> = {
-    [key: string]: ColumnDef<PaginatedListItemFields<T>>;
+    [key: string]: ColumnDefWithMetaDependencies<PaginatedListItemFields<T>>;
 };
 
 export interface PaginatedListContext {
@@ -419,15 +423,14 @@ export function PaginatedListDataTable<
         bulkActions,
         deleteMutation,
         additionalColumns,
-        defaultColumnOrder,
+        defaultColumnOrder: getStandardizedDefaultColumnOrder(defaultColumnOrder),
     });
-
-    const columnVisibility = getColumnVisibility(fields, defaultVisibility, customFieldColumnNames);
+    const columnVisibility = getColumnVisibility(columns, defaultVisibility, customFieldColumnNames);
     // Get the actual visible columns and only fetch those
     const visibleColumns = columns
         // Filter out invisible columns, but _always_ select "id"
         // because it is usually needed.
-        .filter(c => columnVisibility[c.id as string] || c.id === 'id')
+        .filter(c => columnVisibility[c.id as string] !== false || c.id === 'id')
         .map(c => ({
             name: c.id as string,
             isCustomField: (c.meta as any)?.isCustomField ?? false,

package/src/lib/components/shared/remove-from-channel-bulk-action.tsx

@@ -6,7 +6,7 @@ import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-
 import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 interface RemoveFromChannelBulkActionProps {
     selection: any[];
@@ -43,22 +43,23 @@ export function RemoveFromChannelBulkAction({
 }: Readonly<RemoveFromChannelBulkActionProps>) {
     const { refetchPaginatedList } = usePaginatedList();
     const { activeChannel } = useChannel();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
+    const selectionLength = selection.length;
     const { mutate } = useMutation({
         mutationFn,
         onSuccess: result => {
             const message =
-                successMessage ||
-                i18n.t(`Successfully removed ${selection.length} ${entityType} from channel`);
+                successMessage || t`Successfully removed ${selectionLength} ${entityType} from channel`;
             toast.success(message);
             refetchPaginatedList();
             table.resetRowSelection();
             onSuccess?.(result);
         },
         onError: error => {
+            const onErrorMessage = error.message;
             const message =
                 errorMessage ||
-                `Failed to remove ${selection.length} ${entityType} from channel: ${error.message}`;
+                `Failed to remove ${selectionLength} ${entityType} from channel: ${onErrorMessage}`;
             toast.error(message);
         },
     });

package/src/lib/components/shared/rich-text-editor/image-dialog.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { SetImageOptions } from '@tiptap/extension-image';
 import { Editor } from '@tiptap/react';
 import { ImageIcon, PaperclipIcon } from 'lucide-react';

package/src/lib/components/shared/rich-text-editor/link-dialog.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Editor } from '@tiptap/react';
 import { useEffect, useState } from 'react';
 import { Button } from '../../ui/button.js';

package/src/lib/components/shared/rich-text-editor/responsive-toolbar.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Editor } from '@tiptap/react';
 import {
     BoldIcon,

package/src/lib/components/shared/rich-text-editor/table-edit-icons.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Editor } from '@tiptap/react';
 import { MoreHorizontalIcon, MoreVerticalIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';

package/src/lib/components/shared/role-code-label.tsx

@@ -1,5 +1,5 @@
 import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/vdb/constants.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 export function RoleCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
     return code === SUPER_ADMIN_ROLE_CODE ? (

package/src/lib/components/shared/role-selector.tsx

@@ -1,6 +1,6 @@
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { MultiSelect } from './multi-select.js';
 
@@ -24,7 +24,7 @@ export interface RoleSelectorProps<T extends boolean> {
 
 export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
     const { value, onChange, multiple } = props;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { data } = useQuery({
         queryKey: ['roles'],
@@ -49,8 +49,8 @@ export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
             onChange={onChange}
             multiple={multiple}
             items={items}
-            placeholder={i18n.t('Select a role')}
-            searchPlaceholder={i18n.t('Search roles...')}
+            placeholder={t`Select a role`}
+            searchPlaceholder={t`Search roles...`}
         />
     );
 }

package/src/lib/components/shared/seller-selector.tsx

@@ -9,7 +9,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';

package/src/lib/components/shared/stock-level-label.tsx

@@ -1,4 +1,4 @@
-import { useLingui } from '../../lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 
 export type StockLevel = {
     stockOnHand: number;
@@ -6,7 +6,7 @@ export type StockLevel = {
 };
 
 export function StockLevelLabel({ stockLevels }: Readonly<{ stockLevels: StockLevel[] }>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     if (!Array.isArray(stockLevels)) {
         return null;
@@ -15,9 +15,7 @@ export function StockLevelLabel({ stockLevels }: Readonly<{ stockLevels: StockLe
     const totalAllocated = stockLevels.reduce((acc, curr) => acc + curr.stockAllocated, 0);
 
     return (
-        <span
-            title={`${i18n.t('Stock on hand')}: ${totalOnHand}, ${i18n.t('Stock allocated')}: ${totalAllocated}`}
-        >
+        <span title={`${t`Stock on hand`}: ${totalOnHand}, ${t`Stock allocated`}: ${totalAllocated}`}>
             {totalOnHand} <span className="text-muted-foreground">/ {totalAllocated}</span>
         </span>
     );

package/src/lib/components/shared/table-cell/order-table-cell-components.tsx

@@ -2,6 +2,7 @@ import { Money } from '@/vdb/components/data-display/money.js';
 import { DataTableCellComponent } from '@/vdb/components/data-table/types.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { Link } from '@tanstack/react-router';
 
 type CustomerCellData = {
@@ -27,8 +28,9 @@ export const CustomerCell: DataTableCellComponent<CustomerCellData> = ({ row })
 };
 
 export const OrderStateCell: DataTableCellComponent<{ state: string }> = ({ row }) => {
+    const { getTranslatedOrderState } = useDynamicTranslations();
     const value = row.original.state;
-    return <Badge variant="outline">{value}</Badge>;
+    return <Badge variant="outline">{getTranslatedOrderState(value)}</Badge>;
 };
 
 export const OrderMoneyCell: DataTableCellComponent<{ currencyCode: string }> = ({ cell, row }) => {

package/src/lib/components/shared/tax-category-selector.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/select.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Skeleton } from '../ui/skeleton.js';
 

package/src/lib/components/shared/translatable-form-field.tsx

@@ -2,7 +2,7 @@ import { OverriddenFormComponent } from '@/vdb/framework/form-engine/overridden-
 import { LocationWrapper } from '@/vdb/framework/layout-engine/location-wrapper.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Controller, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '../ui/form.js';
 import { FormFieldWrapper } from './form-field-wrapper.js';
@@ -35,17 +35,17 @@ export type TranslatableFormFieldProps<TFieldValues extends TranslatableEntity |
     name: TFieldValues extends TranslatableEntity
         ? keyof Omit<NonNullable<TFieldValues['translations']>[number], 'languageCode'>
         : TFieldValues extends TranslatableEntity[]
-          ? keyof Omit<NonNullable<TFieldValues[number]['translations']>[number], 'languageCode'>
-          : never;
+            ? keyof Omit<NonNullable<TFieldValues[number]['translations']>[number], 'languageCode'>
+            : never;
 };
 
 export const TranslatableFormField = <
     TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
 >({
-    name,
-    label,
-    ...props
-}: TranslatableFormFieldProps<TFieldValues>) => {
+      name,
+      label,
+      ...props
+  }: TranslatableFormFieldProps<TFieldValues>) => {
     const { formatLanguageName } = useLocalFormat();
     const { contentLanguage } = useUserSettings().settings;
     const formValues = props.control?._formValues;
@@ -76,7 +76,7 @@ export type TranslatableFormFieldWrapperProps<
 /**
  * @description
  * This is the equivalent of the {@link FormFieldWrapper} component, but for translatable fields.
- * 
+ *
  * @example
  * ```tsx
  * <PageBlock column="main" blockId="main-form">
@@ -112,13 +112,13 @@ export type TranslatableFormFieldWrapperProps<
 export const TranslatableFormFieldWrapper = <
     TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
 >({
-    name,
-    label,
-    description,
-    render,
-    renderFormControl,
-    ...props
-}: TranslatableFormFieldWrapperProps<TFieldValues>) => {
+      name,
+      label,
+      description,
+      render,
+      renderFormControl,
+      ...props
+  }: TranslatableFormFieldWrapperProps<TFieldValues>) => {
     return (
         <LocationWrapper identifier={name as string}>
             <TranslatableFormField

package/src/lib/components/shared/zone-selector.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/select.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Skeleton } from '../ui/skeleton.js';
 

package/src/lib/constants.ts

@@ -3,6 +3,16 @@ export const AUTHENTICATED_ROUTE_PREFIX = '/_authenticated';
 export const DEFAULT_CHANNEL_CODE = '__default_channel__';
 export const SUPER_ADMIN_ROLE_CODE = '__super_admin_role__';
 export const CUSTOMER_ROLE_CODE = '__customer_role__';
+
+/**
+ * Local storage keys
+ */
+export const LS_KEY_SESSION_TOKEN = 'vendure-session-token';
+export const LS_KEY_USER_SETTINGS = 'vendure-user-settings';
+export const LS_KEY_SELECTED_CHANNEL_TOKEN = 'vendure-selected-channel-token';
+export const LS_KEY_SHIPPING_TEST_ORDER = 'vendure-shipping-test-order';
+export const LS_KEY_SHIPPING_TEST_ADDRESS = 'vendure-shipping-test-address';
+
 /**
  * This is copied from the generated types from @vendure/common/lib/generated-types.d.ts
  * It is used to provide a list of available currency codes for the user to select from.

package/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -1,6 +1,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
 import { DashboardBaseWidgetProps } from '@/vdb/framework/extension-api/types/index.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 
@@ -12,21 +13,22 @@ type WidgetDimensions = {
 export const WidgetContentContext = createContext<WidgetDimensions>({ width: 0, height: 0 });
 
 export const useWidgetDimensions = () => {
+    const { t } = useLingui();
     const context = useContext(WidgetContentContext);
     if (!context) {
-        throw new Error('useWidgetDimensions must be used within a DashboardBaseWidget');
+        throw new Error(t`useWidgetDimensions must be used within a DashboardBaseWidget`);
     }
     return context;
 };
 
 export function DashboardBaseWidget({
-    id,
-    config,
-    children,
-    title,
-    description,
-    actions,
-}: DashboardBaseWidgetProps) {
+                                        id,
+                                        config,
+                                        children,
+                                        title,
+                                        description,
+                                        actions,
+                                    }: DashboardBaseWidgetProps) {
     const headerRef = useRef<HTMLDivElement>(null);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);

package/src/lib/framework/dashboard-widget/latest-orders-widget/index.tsx

@@ -6,6 +6,7 @@ import {
 } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { formatRelative } from 'date-fns';
@@ -17,6 +18,7 @@ import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
 export const WIDGET_ID = 'latest-orders-widget';
 
 export function LatestOrdersWidget() {
+    const { t } = useLingui();
     const { dateRange } = useWidgetFilters();
     const [sorting, setSorting] = useState<SortingState>([
         {
@@ -55,7 +57,7 @@ export function LatestOrdersWidget() {
     }, [dateRange]);
 
     return (
-        <DashboardBaseWidget id={WIDGET_ID} title="Latest Orders" description="Your latest orders">
+        <DashboardBaseWidget id={WIDGET_ID} title={t`Latest Orders`} description={t`Your latest orders`}>
             <PaginatedListDataTable
                 page={page}
                 transformVariables={variables => ({
@@ -75,7 +77,7 @@ export function LatestOrdersWidget() {
                 })}
                 customizeColumns={{
                     code: {
-                        header: 'Code',
+                        header: t`Code`,
                         cell: ({ row }) => {
                             return (
                                 <Button variant="ghost" asChild>
@@ -85,7 +87,7 @@ export function LatestOrdersWidget() {
                         },
                     },
                     orderPlacedAt: {
-                        header: 'Placed At',
+                        header: t`Placed At`,
                         cell: ({ row }) => {
                             return (
                                 <span className="capitalize">
@@ -95,7 +97,7 @@ export function LatestOrdersWidget() {
                         },
                     },
                     total: {
-                        header: 'Total',
+                        header: t`Total`,
                         cell: OrderMoneyCell,
                     },
                     totalWithTax: { cell: OrderMoneyCell },

package/src/lib/framework/dashboard-widget/metrics-widget/index.tsx

@@ -3,6 +3,8 @@ import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { RefreshCw } from 'lucide-react';
 import { useMemo, useState } from 'react';
@@ -18,6 +20,7 @@ enum DATA_TYPES {
 }
 
 export function MetricsWidget() {
+    const { t } = useLingui();
     const { formatDate, formatCurrency } = useLocalFormat();
     const { activeChannel } = useChannel();
     const { dateRange } = useWidgetFilters();
@@ -57,16 +60,16 @@ export function MetricsWidget() {
     return (
         <DashboardBaseWidget
             id="metrics-widget"
-            title="Metrics"
-            description="Order metrics"
+            title={t`Metrics`}
+            description={t`Order metrics`}
             actions={
                 <div className="flex gap-1">
                     <Tabs defaultValue={dataType} onValueChange={value => setDataType(value as DATA_TYPES)}>
                         <TabsList>
-                            <TabsTrigger value={DATA_TYPES.OrderCount}>Order Count</TabsTrigger>
-                            <TabsTrigger value={DATA_TYPES.OrderTotal}>Order Total</TabsTrigger>
+                            <TabsTrigger value={DATA_TYPES.OrderCount}><Trans>Order Count</Trans></TabsTrigger>
+                            <TabsTrigger value={DATA_TYPES.OrderTotal}><Trans>Order Total</Trans></TabsTrigger>
                             <TabsTrigger value={DATA_TYPES.AverageOrderValue}>
-                                Average Order Value
+                                <Trans>Average Order Value</Trans>
                             </TabsTrigger>
                         </TabsList>
                     </Tabs>

package/src/lib/framework/dashboard-widget/orders-summary/index.tsx

@@ -1,5 +1,7 @@
 import { AnimatedCurrency, AnimatedNumber } from '@/vdb/components/shared/animated-number.js';
 import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { differenceInDays, subDays } from 'date-fns';
 import { useMemo } from 'react';
@@ -27,6 +29,7 @@ function PercentageChange({ value }: PercentageChangeProps) {
 }
 
 export function OrdersSummaryWidget() {
+    const { t } = useLingui();
     const { dateRange } = useWidgetFilters();
 
     const variables = useMemo(() => {
@@ -78,13 +81,13 @@ export function OrdersSummaryWidget() {
     return (
         <DashboardBaseWidget
             id={WIDGET_ID}
-            title="Orders Summary"
-            description="Your orders summary"
+            title={t`Orders Summary`}
+            description={t`Your orders summary`}
         >
             <div className="@container h-full">
                 <div className="flex flex-col h-full @md:flex-row gap-8 items-center justify-center @md:justify-evenly text-center tabular-nums">
                     <div className="flex flex-col lg:gap-2">
-                        <p className="lg:text-lg text-muted-foreground">Total Orders</p>
+                        <p className="lg:text-lg text-muted-foreground"><Trans>Total Orders</Trans></p>
                         <p className="text-xl @md:text-3xl font-semibold">
                             <AnimatedNumber
                                 animationConfig={{ mass: 0.01, stiffness: 90, damping: 3 }}
@@ -94,7 +97,7 @@ export function OrdersSummaryWidget() {
                         <PercentageChange value={orderChange} />
                     </div>
                     <div className="flex flex-col lg:gap-2">
-                        <p className="lg:text-lg text-muted-foreground">Total Revenue</p>
+                        <p className="lg:text-lg text-muted-foreground"><Trans>Total Revenue</Trans></p>
                         <p className="text-xl @md:text-3xl font-semibold">
                             <AnimatedCurrency
                                 animationConfig={{ mass: 0.01, stiffness: 90, damping: 3 }}