fix(dashboard): Localize system page relative dates

Relates to #4004

packages/dashboard/src/app/routes/_authenticated/_system/healthchecks.tsx

@@ -1,11 +1,11 @@
 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 { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { getApiBaseUrl } from '@/vdb/utils/config-utils.js';
 import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
-import { formatRelative } from 'date-fns';
 import { CheckCircle2Icon, CircleXIcon } from 'lucide-react';
 
 export const Route = createFileRoute('/_authenticated/_system/healthchecks')({
@@ -25,6 +25,7 @@ interface HealthcheckResponse {
 }
 
 function HealthchecksPage() {
+    const { formatRelativeDate } = useLocalFormat();
     const { data, refetch, dataUpdatedAt } = useQuery({
         queryKey: ['healthchecks'],
         queryFn: async () => {
@@ -54,7 +55,7 @@ function HealthchecksPage() {
                                 <Trans>Current status</Trans>
                             </span>
                             <span className="text-sm font-normal text-muted-foreground">
-                                <Trans>Last updated {formatRelative(dataUpdatedAt, new Date())}</Trans>
+                                <Trans>Last updated {formatRelativeDate(new Date(dataUpdatedAt))}</Trans>
                             </span>
                         </CardTitle>
                     </CardHeader>

packages/dashboard/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -9,10 +9,10 @@ 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 { useLocalFormat } from '@/vdb/hooks/use-local-format.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';
 import {
     Ban,
     CheckCircle2Icon,
@@ -77,6 +77,7 @@ const REFRESH_INTERVALS = [
 function JobQueuePage() {
     const refreshRef = useRef<() => void>(() => {});
     const { t } = useLingui();
+    const { formatRelativeDate } = useLocalFormat();
     const [refreshInterval, setRefreshInterval] = useState(10000);
     const isActionMenuOpenRef = useRef(false);
 
@@ -107,7 +108,7 @@ function JobQueuePage() {
                 createdAt: {
                     cell: ({ row }) => (
                         <div title={row.original.createdAt}>
-                            {formatRelative(new Date(row.original.createdAt), new Date())}
+                            {formatRelativeDate(row.original.createdAt)}
                         </div>
                     ),
                 },