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

package/src/app/routes/_authenticated/_shipping-methods/components/test-single-shipping-method-sheet.tsx

@@ -7,7 +7,7 @@ import {
     SheetTitle,
     SheetTrigger,
 } from '@/vdb/components/ui/sheet.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { VariablesOf } from 'gql.tada';
 import { FlaskConical } from 'lucide-react';
 import { useState } from 'react';
@@ -20,9 +20,9 @@ interface TestSingleShippingMethodDialogProps {
 }
 
 export function TestSingleShippingMethodSheet({
-    checker,
-    calculator,
-}: Readonly<TestSingleShippingMethodDialogProps>) {
+                                                  checker,
+                                                  calculator,
+                                              }: Readonly<TestSingleShippingMethodDialogProps>) {
     const [open, setOpen] = useState(false);
 
     return (

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

@@ -3,7 +3,7 @@ import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import {
@@ -25,7 +25,7 @@ function ShippingMethodListPage() {
             pageId="shipping-method-list"
             listQuery={shippingMethodListQuery}
             route={Route}
-            title="Shipping Methods"
+            title={<Trans>Shipping Methods</Trans>}
             defaultVisibility={{
                 name: true,
                 code: true,
@@ -33,7 +33,6 @@ function ShippingMethodListPage() {
             }}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -18,7 +18,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 { FulfillmentHandlerSelector } from './components/fulfillment-handler-selector.js';
@@ -52,7 +52,7 @@ function ShippingMethodDetailPage() {
     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,

package/src/app/routes/_authenticated/_stock-locations/stock-locations.tsx

@@ -3,7 +3,7 @@ import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import {
@@ -22,12 +22,11 @@ function StockLocationListPage() {
     return (
         <ListPage
             pageId="stock-location-list"
-            title="Stock Locations"
+            title={<Trans>Stock Locations</Trans>}
             listQuery={stockLocationListQuery}
             route={Route}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
@@ -56,7 +55,7 @@ function StockLocationListPage() {
                     <Button asChild>
                         <Link to="./new">
                             <PlusIcon className="mr-2 h-4 w-4" />
-                            New Stock Location
+                            <Trans>New Stock Location</Trans>
                         </Link>
                     </Button>
                 </PermissionGuard>

package/src/app/routes/_authenticated/_stock-locations/stock-locations_.$id.tsx

@@ -17,7 +17,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 {
@@ -47,7 +47,7 @@ function StockLocationDetailPage() {
     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,
@@ -64,16 +64,23 @@ function StockLocationDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created stock location' : 'Successfully updated stock location'));
+            toast.success(
+                creatingNewEntity
+                    ? t`Successfully created stock location`
+                    : t`Successfully updated stock location`,
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create stock location' : 'Failed to update stock location'), {
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
+            toast.error(
+                creatingNewEntity ? t`Failed to create stock location` : t`Failed to update stock location`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
         },
     });
 

package/src/app/routes/_authenticated/_system/healthchecks.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
 import { Page, PageActionBar, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { formatRelative } from 'date-fns';
@@ -39,15 +39,21 @@ function HealthchecksPage() {
 
     return (
         <Page>
-            <PageTitle>Healthchecks</PageTitle>
+            <PageTitle>
+                <Trans>Health checks</Trans>
+            </PageTitle>
             <PageActionBar>
-                <Button onClick={() => refetch()}>Refresh</Button>
+                <Button onClick={() => refetch()}>
+                    <Trans>Refresh</Trans>
+                </Button>
             </PageActionBar>
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
                 <Card>
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
-                            <span> Current status</span>
+                            <span>
+                                <Trans>Current status</Trans>
+                            </span>
                             <span className="text-sm font-normal text-muted-foreground">
                                 <Trans>Last updated {formatRelative(dataUpdatedAt, new Date())}</Trans>
                             </span>

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -9,7 +9,7 @@ import {
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { formatRelative } from 'date-fns';
@@ -76,6 +76,7 @@ const REFRESH_INTERVALS = [
 
 function JobQueuePage() {
     const refreshRef = useRef<() => void>(() => {});
+    const { t } = useLingui();
     const [refreshInterval, setRefreshInterval] = useState(10000);
 
     useEffect(() => {
@@ -93,13 +94,12 @@ function JobQueuePage() {
     return (
         <ListPage
             pageId="job-queue-list"
-            title="Job Queue"
+            title={<Trans>Job Queue</Trans>}
             defaultSort={[{ id: 'createdAt', desc: true }]}
             listQuery={jobListDocument}
             route={Route}
             customizeColumns={{
                 createdAt: {
-                    header: 'Created At',
                     cell: ({ row }) => (
                         <div title={row.original.createdAt}>
                             {formatRelative(new Date(row.original.createdAt), new Date())}
@@ -107,7 +107,6 @@ function JobQueuePage() {
                     ),
                 },
                 data: {
-                    header: 'Data',
                     cell: ({ row }) => (
                         <PayloadDialog
                             payload={row.original.data}
@@ -115,18 +114,16 @@ function JobQueuePage() {
                             description={<Trans>The data that has been passed to the job</Trans>}
                             trigger={
                                 <Button size="sm" variant="secondary">
-                                    View data
+                                    <Trans>View data</Trans>
                                 </Button>
                             }
                         />
                     ),
                 },
                 queueName: {
-                    header: 'Queue',
                     cell: ({ row }) => <span className="font-mono">{row.original.queueName}</span>,
                 },
                 result: {
-                    header: 'Result',
                     cell: ({ row }) => {
                         return row.original.result ? (
                             <PayloadDialog
@@ -135,7 +132,7 @@ function JobQueuePage() {
                                 description={<Trans>The result of the job</Trans>}
                                 trigger={
                                     <Button size="sm" variant="secondary">
-                                        View result
+                                        <Trans>View result</Trans>
                                     </Button>
                                 }
                             />
@@ -147,7 +144,6 @@ function JobQueuePage() {
                     },
                 },
                 state: {
-                    header: 'State',
                     cell: ({ row, table }) => {
                         const cancelJobMutation = useMutation({
                             mutationFn: (jobId: string) => api.mutate(cancelJobDocument, { jobId }),
@@ -196,7 +192,6 @@ function JobQueuePage() {
                     },
                 },
                 duration: {
-                    header: 'Duration',
                     cell: ({ row }) => {
                         return row.original.duration ? `${row.original.duration}ms` : null;
                     },
@@ -213,7 +208,7 @@ function JobQueuePage() {
             }}
             facetedFilters={{
                 queueName: {
-                    title: 'Queue',
+                    title: t`Queue`,
                     optionsFn: async () => {
                         return api.query(jobQueueListDocument).then(r => {
                             return r.jobQueues.map(queue => ({
@@ -224,7 +219,7 @@ function JobQueuePage() {
                     },
                 },
                 state: {
-                    title: 'State',
+                    title: t`State`,
                     options: STATES,
                 },
             }}
@@ -237,7 +232,9 @@ function JobQueuePage() {
                     <DropdownMenuTrigger asChild>
                         <Button variant="outline" size="sm" className="gap-2">
                             <RefreshCw className="h-4 w-4" />
-                            <span>Auto refresh: {currentInterval?.label}</span>
+                            <span>
+                                <Trans>Auto refresh: {currentInterval?.label}</Trans>
+                            </span>
                             <ChevronDown className="h-4 w-4" />
                         </Button>
                     </DropdownMenuTrigger>

package/src/app/routes/_authenticated/_system/scheduled-tasks.tsx

@@ -16,7 +16,7 @@ import {
 import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { createColumnHelper } from '@tanstack/react-table';
@@ -65,7 +65,7 @@ const runScheduledTaskDocument = graphql(`
 type ScheduledTask = ResultOf<typeof getScheduledTasksDocument>['scheduledTasks'][number];
 
 function ScheduledTasksPage() {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const { data } = useQuery({
         queryKey: ['scheduledTasks'],
         queryFn: () => api.query(getScheduledTasksDocument),
@@ -84,10 +84,10 @@ function ScheduledTasksPage() {
         mutationFn: api.mutate(runScheduledTaskDocument),
         onSuccess: result => {
             if ((result as ResultOf<typeof runScheduledTaskDocument>).runScheduledTask.success) {
-                toast.success(i18n.t(`Scheduled task will be executed`));
+                toast.success(t`Scheduled task will be executed`);
                 queryClient.invalidateQueries({ queryKey: ['scheduledTasks'] });
             } else {
-                toast.error(i18n.t(`Scheduled task could not be executed`));
+                toast.error(t`Scheduled task could not be executed`);
             }
         },
     });
@@ -104,13 +104,13 @@ function ScheduledTasksPage() {
     const columnHelper = createColumnHelper<ScheduledTask>();
     const columns = [
         columnHelper.accessor('id', {
-            header: 'ID',
+            header: t`ID`,
         }),
         columnHelper.accessor('description', {
-            header: 'Description',
+            header: t`Description`,
         }),
         columnHelper.accessor('enabled', {
-            header: 'Enabled',
+            header: t`Enabled`,
             cell: ({ row }) => {
                 return row.original.enabled ? (
                     <Badge variant="success">
@@ -124,13 +124,13 @@ function ScheduledTasksPage() {
             },
         }),
         columnHelper.accessor('schedule', {
-            header: 'Schedule Pattern',
+            header: t`Schedule Pattern`,
         }),
         columnHelper.accessor('scheduleDescription', {
-            header: 'Schedule',
+            header: t`Schedule`,
         }),
         columnHelper.accessor('lastExecutedAt', {
-            header: 'Last Executed',
+            header: t`Last Executed`,
             cell: ({ row }) => {
                 return row.original.lastExecutedAt ? (
                     <div title={row.original.lastExecutedAt}>
@@ -142,7 +142,7 @@ function ScheduledTasksPage() {
             },
         }),
         columnHelper.accessor('nextExecutionAt', {
-            header: 'Next Execution',
+            header: t`Next Execution`,
             cell: ({ row }) => {
                 return row.original.nextExecutionAt ? (
                     formatDate(row.original.nextExecutionAt, intlDateOptions)
@@ -152,7 +152,7 @@ function ScheduledTasksPage() {
             },
         }),
         columnHelper.accessor('isRunning', {
-            header: 'Running',
+            header: t`Running`,
             cell: ({ row }) => {
                 return row.original.isRunning ? (
                     <Badge variant="success">
@@ -166,7 +166,7 @@ function ScheduledTasksPage() {
             },
         }),
         columnHelper.accessor('lastResult', {
-            header: 'Last Result',
+            header: t`Last Result`,
             cell: ({ row }) => {
                 return row.original.lastResult ? (
                     <PayloadDialog
@@ -175,7 +175,7 @@ function ScheduledTasksPage() {
                         description={<Trans>The result of the job</Trans>}
                         trigger={
                             <Button size="sm" variant="secondary">
-                                View result
+                                <Trans>View result</Trans>
                             </Button>
                         }
                     />
@@ -188,7 +188,7 @@ function ScheduledTasksPage() {
         }),
         columnHelper.display({
             id: 'actions',
-            header: 'Actions',
+            header: t`Actions`,
             cell: ({ row }) => {
                 return (
                     <DropdownMenu>
@@ -228,7 +228,9 @@ function ScheduledTasksPage() {
 
     return (
         <Page pageId="scheduled-tasks-list">
-            <PageTitle>Scheduled Tasks</PageTitle>
+            <PageTitle>
+                <Trans>Scheduled Tasks</Trans>
+            </PageTitle>
             <PageLayout>
                 <FullWidthPageBlock blockId="list-table">
                     <DataTable

package/src/app/routes/_authenticated/_tax-categories/tax-categories.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteTaxCategoriesBulkAction } from './components/tax-category-bulk-actions.js';
@@ -21,7 +21,7 @@ function TaxCategoryListPage() {
             pageId="tax-category-list"
             listQuery={taxCategoryListQuery}
             route={Route}
-            title="Tax Categories"
+            title={<Trans>Tax Categories</Trans>}
             defaultVisibility={{
                 name: true,
                 isDefault: true,
@@ -37,11 +37,9 @@ function TaxCategoryListPage() {
             }}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
                 isDefault: {
-                    header: 'Default',
                     cell: ({ row }) => (
                         <Badge variant={row.original.isDefault ? 'success' : 'destructive'}>
                             <Trans>{row.original.isDefault ? 'Yes' : 'No'}</Trans>

package/src/app/routes/_authenticated/_tax-categories/tax-categories_.$id.tsx

@@ -17,7 +17,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 {
@@ -47,7 +47,7 @@ function TaxCategoryDetailPage() {
     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,
@@ -63,16 +63,23 @@ function TaxCategoryDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created tax category' : 'Successfully updated tax category'));
+            toast.success(
+                creatingNewEntity
+                    ? t`Successfully created tax category`
+                    : t`Successfully updated tax category`,
+            );
             form.reset(form.getValues());
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create tax category' : 'Failed to update tax category'), {
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
+            toast.error(
+                creatingNewEntity ? t`Failed to create tax category` : t`Failed to update tax category`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
         },
     });
 

package/src/app/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
@@ -19,12 +19,13 @@ export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
 });
 
 function TaxRateListPage() {
+    const { t } = useLingui();
     return (
         <ListPage
             pageId="tax-rate-list"
             listQuery={taxRateListQuery}
             route={Route}
-            title="Tax Rates"
+            title={<Trans>Tax Rates</Trans>}
             defaultVisibility={{
                 name: true,
                 enabled: true,
@@ -43,14 +44,14 @@ function TaxRateListPage() {
             }}
             facetedFilters={{
                 enabled: {
-                    title: 'Enabled',
+                    title: t`Enabled`,
                     options: [
-                        { label: 'Enabled', value: true },
-                        { label: 'Disabled', value: false },
+                        { label: t`Enabled`, value: true },
+                        { label: t`Disabled`, value: false },
                     ],
                 },
                 category: {
-                    title: 'Category',
+                    title: t`Category`,
                     optionsFn: async () => {
                         const { taxCategories } = await api.query(taxCategoryListQuery);
                         return taxCategories.items.map(category => ({
@@ -60,7 +61,7 @@ function TaxRateListPage() {
                     },
                 },
                 zone: {
-                    title: 'Zone',
+                    title: t`Zone`,
                     optionsFn: async () => {
                         const { zones } = await api.query(zoneListQuery);
                         return zones.items.map(zone => ({
@@ -72,23 +73,18 @@ function TaxRateListPage() {
             }}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
                 enabled: {
-                    header: 'Enabled',
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
                 category: {
-                    header: 'Category',
                     cell: ({ row }) => row.original.category?.name,
                 },
                 zone: {
-                    header: 'Zone',
                     cell: ({ row }) => row.original.zone?.name,
                 },
                 value: {
-                    header: 'Value',
                     cell: ({ row }) => `${row.original.value}%`,
                 },
             }}

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -20,7 +20,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 { createTaxRateDocument, taxRateDetailDocument, updateTaxRateDocument } from './tax-rates.graphql.js';
@@ -46,7 +46,7 @@ function TaxRateDetailPage() {
     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,
@@ -67,14 +67,16 @@ function TaxRateDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created tax rate' : 'Successfully updated tax rate'));
+            toast.success(
+                creatingNewEntity ? t`Successfully created tax rate` : t`Successfully updated tax rate`,
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create tax rate' : 'Failed to update tax rate'), {
+            toast.error(creatingNewEntity ? t`Failed to create tax rate` : t`Failed to update tax rate`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_zones/components/zone-countries-sheet.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/vdb/components/ui/sheet.js';
+import { FullWidthPageBlock } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ZoneCountriesTable } from './zone-countries-table.js';
 
 interface ZoneCountriesSheetProps {
@@ -23,7 +24,9 @@ export function ZoneCountriesSheet({ zoneId, zoneName, children }: Readonly<Zone
                 </SheetHeader>
                 <div className="flex items-center gap-2"></div>
                 <ScrollArea className="px-6 max-h-[600px]">
-                    <ZoneCountriesTable zoneId={zoneId} />
+                    <FullWidthPageBlock blockId="zone-countries">
+                        <ZoneCountriesTable zoneId={zoneId} />
+                    </FullWidthPageBlock>
                 </ScrollArea>
             </SheetContent>
         </Sheet>

package/src/app/routes/_authenticated/_zones/zones.tsx

@@ -3,7 +3,7 @@ import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteZonesBulkAction } from './components/zone-bulk-actions.js';
@@ -16,24 +16,24 @@ export const Route = createFileRoute('/_authenticated/_zones/zones')({
 });
 
 function ZoneListPage() {
+    const { t } = useLingui();
     return (
         <ListPage
             pageId="zone-list"
             listQuery={zoneListQuery}
             route={Route}
-            title="Zones"
+            title={<Trans>Zones</Trans>}
             defaultVisibility={{
                 name: true,
             }}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
             additionalColumns={{
                 regions: {
-                    header: 'Regions',
+                    header: t`Regions`,
                     cell: ({ row }) => (
                         <ZoneCountriesSheet zoneId={row.original.id} zoneName={row.original.name}>
                             <Trans>Edit members</Trans>