@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/app/routes/_authenticated/_zones/zones_.$id.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { ZoneCountriesTable } from './components/zone-countries-table.js';
@@ -30,7 +30,10 @@ export const Route = createFileRoute('/_authenticated/_zones/zones_/$id')({
         pageId,
         queryDocument: zoneDetailDocument,
         breadcrumb(isNew, entity) {
-            return [{ path: '/zones', label: <Trans>Zones</Trans> }, isNew ? <Trans>New zone</Trans> : entity?.name];
+            return [
+                { path: '/zones', label: <Trans>Zones</Trans> },
+                isNew ? <Trans>New zone</Trans> : entity?.name,
+            ];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
@@ -40,7 +43,7 @@ function ZoneDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -56,14 +59,14 @@ function ZoneDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created zone' : 'Successfully updated zone'));
+            toast.success(creatingNewEntity ? t`Successfully created zone` : t`Successfully updated zone`);
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create zone' : 'Failed to update zone'), {
+            toast.error(creatingNewEntity ? t`Failed to create zone` : t`Failed to update zone`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/index.tsx

@@ -1,3 +1,4 @@
+import { DateRangePicker } from '@/vdb/components/date-range-picker.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import type { GridLayout as GridLayoutType } from '@/vdb/components/ui/grid-layout.js';
 import { GridLayout } from '@/vdb/components/ui/grid-layout.js';
@@ -5,6 +6,10 @@ import {
     getDashboardWidget,
     getDashboardWidgetRegistry,
 } from '@/vdb/framework/dashboard-widget/widget-extensions.js';
+import {
+    DefinedDateRange,
+    WidgetFiltersProvider,
+} from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
 import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
 import {
     FullWidthPageBlock,
@@ -16,7 +21,9 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { createFileRoute } from '@tanstack/react-router';
-import { useEffect, useState, useRef } from 'react';
+import { endOfDay, startOfMonth } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 export const Route = createFileRoute('/_authenticated/')({
     component: DashboardPage,
@@ -67,12 +74,17 @@ function DashboardPage() {
     const [editMode, setEditMode] = useState(false);
     const [isInitialized, setIsInitialized] = useState(false);
     const prevEditModeRef = useRef(editMode);
+    const { t } = useLingui();
+    const [dateRange, setDateRange] = useState<DefinedDateRange>({
+        from: startOfMonth(new Date()),
+        to: endOfDay(new Date()),
+    });
 
     const { settings, setWidgetLayout } = useUserSettings();
 
     useEffect(() => {
         const savedLayouts = settings.widgetLayout || {};
-        
+
         const initialWidgets = Array.from(getDashboardWidgetRegistry().entries()).reduce(
             (acc: DashboardWidgetInstance[], [id, widget]) => {
                 const defaultSize = {
@@ -88,7 +100,7 @@ function DashboardPage() {
 
                 // Check if we have a saved layout for this widget
                 const savedLayout = savedLayouts[id];
-                
+
                 const layout = {
                     w: savedLayout?.w ?? defaultSize.w,
                     h: savedLayout?.h ?? defaultSize.h,
@@ -125,7 +137,7 @@ function DashboardPage() {
         setWidgets(initialWidgets);
         setIsInitialized(true);
     }, [settings.widgetLayout]);
-    
+
     // Save layout when edit mode is turned off
     useEffect(() => {
         // Only save when transitioning from edit mode ON to OFF
@@ -141,7 +153,7 @@ function DashboardPage() {
             });
             setWidgetLayout(layoutConfig);
         }
-        
+
         // Update the ref for next render
         prevEditModeRef.current = editMode;
     }, [editMode, isInitialized, widgets, setWidgetLayout]);
@@ -165,14 +177,21 @@ function DashboardPage() {
 
     return (
         <Page pageId="insights">
-            <PageTitle>Insights</PageTitle>
+            <PageTitle>
+                <Trans>Insights</Trans>
+            </PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
-                    <Button 
-                        variant={editMode ? "default" : "outline"} 
+                    <DateRangePicker
+                        dateRange={dateRange}
+                        onDateRangeChange={setDateRange}
+                        className="mr-2"
+                    />
+                    <Button
+                        variant={editMode ? 'default' : 'outline'}
                         onClick={() => setEditMode(prev => !prev)}
                     >
-                        {editMode ? "Save Layout" : "Edit Layout"}
+                        {editMode ? t`Save Layout` : t`Edit Layout`}
                     </Button>
                 </PageActionBarRight>
             </PageActionBar>
@@ -180,22 +199,24 @@ function DashboardPage() {
                 <FullWidthPageBlock blockId="widgets">
                     <div className="w-full">
                         {widgets.length > 0 ? (
-                            <GridLayout
-                                layouts={widgets.map(w => ({ ...w.layout, i: w.id }))}
-                                onLayoutChange={handleLayoutChange}
-                                cols={12}
-                                rowHeight={100}
-                                isDraggable={editMode}
-                                isResizable={editMode}
-                                className="min-h-[400px]"
-                                gutter={10}
-                            >
-                                {
-                                    widgets
-                                        .map(widget => renderWidget(widget))
-                                        .filter(Boolean) as React.ReactElement[]
-                                }
-                            </GridLayout>
+                            <WidgetFiltersProvider filters={{ dateRange }}>
+                                <GridLayout
+                                    layouts={widgets.map(w => ({ ...w.layout, i: w.id }))}
+                                    onLayoutChange={handleLayoutChange}
+                                    cols={12}
+                                    rowHeight={100}
+                                    isDraggable={editMode}
+                                    isResizable={editMode}
+                                    className="min-h-[400px]"
+                                    gutter={10}
+                                >
+                                    {
+                                        widgets
+                                            .map(widget => renderWidget(widget))
+                                            .filter(Boolean) as React.ReactElement[]
+                                    }
+                                </GridLayout>
+                            </WidgetFiltersProvider>
                         ) : (
                             <div
                                 className="flex items-center justify-center text-muted-foreground"

package/src/app/styles.css

@@ -2,6 +2,10 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+html[dir="rtl"] * {
+    direction: rtl;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 /* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */

package/src/i18n/common-strings.ts

@@ -0,0 +1,111 @@
+/**
+ * These are strings that are not defined as string literals in the code (and therefore won't
+ * get extracted), but still need to have translations
+ */
+const commonI18nString = {
+    fulfillmentState: [
+        /* i18n*/ 'fulfillmentState.Created',
+        /* i18n*/ 'fulfillmentState.Pending',
+        /* i18n*/ 'fulfillmentState.Cancelled',
+        /* i18n*/ 'fulfillmentState.Shipped',
+        /* i18n*/ 'fulfillmentState.Delivered',
+        /* i18n*/ 'fulfillmentState.Cancelled',
+    ],
+    paymentState: [
+        /* i18n*/ 'paymentState.Created',
+        /* i18n*/ 'paymentState.Authorized',
+        /* i18n*/ 'paymentState.Settled',
+        /* i18n*/ 'paymentState.Declined',
+        /* i18n*/ 'paymentState.Error',
+        /* i18n*/ 'paymentState.Cancelled',
+    ],
+    refundState: [
+        /* i18n*/ 'paymentState.Pending',
+        /* i18n*/ 'paymentState.Settled',
+        /* i18n*/ 'paymentState.Failed',
+    ],
+    orderState: [
+        /* i18n*/ 'orderState.Created',
+        /* i18n*/ 'orderState.Draft',
+        /* i18n*/ 'orderState.AddingItems',
+        /* i18n*/ 'orderState.Cancelled',
+        /* i18n*/ 'orderState.ArrangingPayment',
+        /* i18n*/ 'orderState.PaymentAuthorized',
+        /* i18n*/ 'orderState.PaymentSettled',
+        /* i18n*/ 'orderState.PartiallyShipped',
+        /* i18n*/ 'orderState.Shipped',
+        /* i18n*/ 'orderState.PartiallyDelivered',
+        /* i18n*/ 'orderState.Delivered',
+        /* i18n*/ 'orderState.Modifying',
+        /* i18n*/ 'orderState.ArrangingAdditionalPayment',
+    ],
+    fieldName: [
+        /* i18n*/ 'fieldName.attempts',
+        /* i18n*/ 'fieldName.availableCurrencyCodes',
+        /* i18n*/ 'fieldName.availableLanguageCodes',
+        /* i18n*/ 'fieldName.breadcrumbs',
+        /* i18n*/ 'fieldName.category',
+        /* i18n*/ 'fieldName.channels',
+        /* i18n*/ 'fieldName.children',
+        /* i18n*/ 'fieldName.code',
+        /* i18n*/ 'fieldName.couponCode',
+        /* i18n*/ 'fieldName.createdAt',
+        /* i18n*/ 'fieldName.currencyCode',
+        /* i18n*/ 'fieldName.customer',
+        /* i18n*/ 'fieldName.customerGroup',
+        /* i18n*/ 'fieldName.customers',
+        /* i18n*/ 'fieldName.customFields',
+        /* i18n*/ 'fieldName.data',
+        /* i18n*/ 'fieldName.defaultCurrencyCode',
+        /* i18n*/ 'fieldName.defaultLanguageCode',
+        /* i18n*/ 'fieldName.defaultShippingZone',
+        /* i18n*/ 'fieldName.defaultTaxZone',
+        /* i18n*/ 'fieldName.description',
+        /* i18n*/ 'fieldName.duration',
+        /* i18n*/ 'fieldName.emailAddress',
+        /* i18n*/ 'fieldName.enabled',
+        /* i18n*/ 'fieldName.endsAt',
+        /* i18n*/ 'fieldName.error',
+        /* i18n*/ 'fieldName.featuredAsset',
+        /* i18n*/ 'fieldName.firstName',
+        /* i18n*/ 'fieldName.fulfillmentHandlerCode',
+        /* i18n*/ 'fieldName.id',
+        /* i18n*/ 'fieldName.isDefault',
+        /* i18n*/ 'fieldName.isPrivate',
+        /* i18n*/ 'fieldName.isSettled',
+        /* i18n*/ 'fieldName.lastName',
+        /* i18n*/ 'fieldName.name',
+        /* i18n*/ 'fieldName.orderPlacedAt',
+        /* i18n*/ 'fieldName.parentId',
+        /* i18n*/ 'fieldName.perCustomerUsageLimit',
+        /* i18n*/ 'fieldName.permissions',
+        /* i18n*/ 'fieldName.position',
+        /* i18n*/ 'fieldName.price',
+        /* i18n*/ 'fieldName.priceWithTax',
+        /* i18n*/ 'fieldName.pricesIncludeTax',
+        /* i18n*/ 'fieldName.productVariants',
+        /* i18n*/ 'fieldName.progress',
+        /* i18n*/ 'fieldName.queueName',
+        /* i18n*/ 'fieldName.result',
+        /* i18n*/ 'fieldName.retries',
+        /* i18n*/ 'fieldName.seller',
+        /* i18n*/ 'fieldName.settledAt',
+        /* i18n*/ 'fieldName.shippingLines',
+        /* i18n*/ 'fieldName.sku',
+        /* i18n*/ 'fieldName.slug',
+        /* i18n*/ 'fieldName.startedAt',
+        /* i18n*/ 'fieldName.startsAt',
+        /* i18n*/ 'fieldName.state',
+        /* i18n*/ 'fieldName.stockLevels',
+        /* i18n*/ 'fieldName.token',
+        /* i18n*/ 'fieldName.total',
+        /* i18n*/ 'fieldName.totalWithTax',
+        /* i18n*/ 'fieldName.type',
+        /* i18n*/ 'fieldName.updatedAt',
+        /* i18n*/ 'fieldName.usageLimit',
+        /* i18n*/ 'fieldName.user',
+        /* i18n*/ 'fieldName.value',
+        /* i18n*/ 'fieldName.valueList',
+        /* i18n*/ 'fieldName.zone',
+    ],
+};