fix: Show correct date range in insight overview

packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDashboard.vue

@@ -7,7 +7,7 @@ import InsightsSummary from '@/features/execution/insights/components/InsightsSu
 import { useInsightsStore } from '@/features/execution/insights/insights.store';
 import type { DateValue } from '@internationalized/date';
 import { getLocalTimeZone, now, toCalendarDateTime, today } from '@internationalized/date';
-import type { InsightsDateRange, InsightsSummaryType } from '@n8n/api-types';
+import type { InsightsSummaryType } from '@n8n/api-types';
 import { useI18n } from '@n8n/i18n';
 import {
 	computed,
@@ -80,7 +80,6 @@ const transformFilter = ({ id, desc }: { id: string; desc: boolean }) => {
 
 const sortTableBy = ref([{ id: props.insightType, desc: true }]);
 
-const selectedDateRange = ref<InsightsDateRange['key']>('week');
 const granularity = computed(() => {
 	const { start, end } = range.value;
 	if (!start || !end) return 'day';
@@ -164,7 +163,7 @@ const fetchPaginatedTableData = ({
 };
 
 watch(
-	() => [props.insightType, selectedDateRange.value, selectedProject.value, range.value],
+	() => [props.insightType, selectedProject.value, range.value],
 	() => {
 		sortTableBy.value = [{ id: props.insightType, desc: true }];
 
@@ -244,7 +243,8 @@ const projects = computed(() =>
 				v-if="insightsStore.isSummaryEnabled"
 				:summary="insightsStore.summary.state"
 				:loading="insightsStore.summary.isLoading"
-				:time-range="selectedDateRange"
+				:start-date="range.start"
+				:end-date="range.end"
 				:class="$style.insightsBanner"
 			/>
 			<div :class="$style.insightsContent">

packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDataRangePicker.vue

@@ -8,13 +8,10 @@ import type {
 	N8nDateRangePickerRootEmits,
 } from '@n8n/design-system';
 import { N8nButton, N8nDateRangePicker, N8nIcon } from '@n8n/design-system';
-import dateformat from 'dateformat';
 import { computed, ref, shallowRef, watch } from 'vue';
+import { formatDateRange } from '../insights.utils';
 import InsightsUpgradeModal from './InsightsUpgradeModal.vue';
 
-const DATE_FORMAT_DAY_MONTH_YEAR = 'd mmm, yyyy';
-const DATE_FORMAT_DAY_MONTH = 'd mmm';
-
 type Props = Pick<N8nDateRangePickerProps, 'maxValue' | 'minValue'>;
 type Value = {
 	start: DateValue;
@@ -135,18 +132,7 @@ const formattedRange = computed(() => {
 
 	if (!start) return 'Select range';
 
-	const startStr = start.toString();
-	const endStr = end?.toString();
-
-	if (!end || startStr === endStr) {
-		return dateformat(startStr, DATE_FORMAT_DAY_MONTH_YEAR);
-	}
-
-	if (start.year === end.year) {
-		return `${dateformat(startStr, DATE_FORMAT_DAY_MONTH)} - ${dateformat(endStr, DATE_FORMAT_DAY_MONTH_YEAR)}`;
-	}
-
-	return `${dateformat(startStr, DATE_FORMAT_DAY_MONTH_YEAR)} - ${dateformat(endStr, DATE_FORMAT_DAY_MONTH_YEAR)}`;
+	return formatDateRange({ start, end });
 });
 
 function isActiveRange(presetValue: number) {

packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.test.ts

@@ -4,6 +4,7 @@ import { createComponentRenderer } from '@/__tests__/render';
 import type { InsightsSummaryDisplay } from '@/features/execution/insights/insights.types';
 import { createTestingPinia } from '@pinia/testing';
 import { defaultSettings } from '@/__tests__/defaults';
+import { getLocalTimeZone, today } from '@internationalized/date';
 
 vi.mock('vue-router', () => ({
 	useRouter: () => ({}),
@@ -25,6 +26,9 @@ const renderComponent = createComponentRenderer(InsightsSummary, {
 });
 
 describe('InsightsSummary', () => {
+	const endDate = today(getLocalTimeZone());
+	const startDate = endDate.subtract({ days: 7 });
+
 	beforeEach(() => {
 		createTestingPinia({
 			initialState: { settings: { settings: defaultSettings } },
@@ -36,7 +40,8 @@ describe('InsightsSummary', () => {
 			renderComponent({
 				props: {
 					summary: [],
-					timeRange: 'week',
+					startDate,
+					endDate,
 				},
 			}),
 		).not.toThrow();
@@ -105,10 +110,102 @@ describe('InsightsSummary', () => {
 		const { html } = renderComponent({
 			props: {
 				summary,
-				timeRange: 'week',
+				startDate,
+				endDate,
 			},
 		});
 
 		expect(html()).toMatchSnapshot();
 	});
+
+	describe('with different date ranges', () => {
+		const testSummary: InsightsSummaryDisplay = [
+			{ id: 'total', value: 525, deviation: 85, unit: '', deviationUnit: '%' },
+			{ id: 'failed', value: 14, deviation: 3, unit: '', deviationUnit: '%' },
+			{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%', deviationUnit: 'pp' },
+			{ id: 'timeSaved', value: 55.55, deviation: -5.16, unit: 'h', deviationUnit: 'h' },
+			{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's', deviationUnit: 's' },
+		];
+
+		test.each<{
+			description: string;
+			getDates: () => { start: ReturnType<typeof today>; end?: ReturnType<typeof today> };
+		}>([
+			{
+				description: 'last 24 hours (day preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 1 }), end };
+				},
+			},
+			{
+				description: 'last 7 days (week preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 7 }), end };
+				},
+			},
+			{
+				description: 'last 14 days (2weeks preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 14 }), end };
+				},
+			},
+			{
+				description: 'last 30 days (month preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 30 }), end };
+				},
+			},
+			{
+				description: 'last 90 days (quarter preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 90 }), end };
+				},
+			},
+			{
+				description: 'last 180 days (6months preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 180 }), end };
+				},
+			},
+			{
+				description: 'last 365 days (year preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 365 }), end };
+				},
+			},
+			{
+				description: 'custom range ending today',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 15 }), end };
+				},
+			},
+			{
+				description: 'custom range not ending today',
+				getDates: () => {
+					const end = today(getLocalTimeZone()).subtract({ days: 2 });
+					return { start: end.subtract({ days: 7 }), end };
+				},
+			},
+		])('should render with $description', ({ getDates }) => {
+			const { start, end } = getDates();
+
+			const { html } = renderComponent({
+				props: {
+					summary: testSummary,
+					startDate: start,
+					endDate: end,
+				},
+			});
+
+			expect(html()).toMatchSnapshot();
+		});
+	});
 });

packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.vue

@@ -1,26 +1,28 @@
 <script setup lang="ts">
 import { useTelemetry } from '@/app/composables/useTelemetry';
-import { useSettingsStore } from '@/app/stores/settings.store';
 import { VIEWS } from '@/app/constants';
+import { useSettingsStore } from '@/app/stores/settings.store';
 import {
 	INSIGHT_IMPACT_TYPES,
 	INSIGHTS_UNIT_IMPACT_MAPPING,
 } from '@/features/execution/insights/insights.constants';
 import type { InsightsSummaryDisplay } from '@/features/execution/insights/insights.types';
-import type { InsightsDateRange, InsightsSummary } from '@n8n/api-types';
+import type { DateValue } from '@internationalized/date';
+import type { InsightsSummary } from '@n8n/api-types';
+import { N8nCallout, N8nIcon, N8nLink, N8nText, N8nTooltip } from '@n8n/design-system';
 import { useI18n } from '@n8n/i18n';
 import { smartDecimal } from '@n8n/utils/number/smartDecimal';
-import { computed, ref, useCssModule, onMounted } from 'vue';
+import { computed, onMounted, ref, useCssModule } from 'vue';
 import { I18nT } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { getTimeRangeLabels } from '../insights.utils';
-
-import { N8nCallout, N8nIcon, N8nLink, N8nText, N8nTooltip } from '@n8n/design-system';
+import { formatDateRange, getMatchingPreset, getTimeRangeLabels } from '../insights.utils';
 
 const INSIGHTS_QUEUE_MODE_WARNING_DISMISSED_KEY = 'n8n-insights-queue-mode-warning-dismissed';
+
 const props = defineProps<{
 	summary: InsightsSummaryDisplay;
-	timeRange: InsightsDateRange['key'];
+	startDate?: DateValue;
+	endDate?: DateValue;
 	loading?: boolean;
 }>();
 
@@ -49,6 +51,19 @@ const shouldShowQueueModeWarning = computed(() => {
 	return settingsStore.isQueueModeEnabled && !isQueueModeWarningDismissed.value;
 });
 
+const displayDateRangeLabel = computed(() => {
+	const timeRangeKey = getMatchingPreset({
+		start: props.startDate,
+		end: props.endDate,
+	});
+
+	if (timeRangeKey) {
+		return timeRangeLabels[timeRangeKey];
+	}
+
+	return formatDateRange({ start: props.startDate, end: props.endDate });
+});
+
 const summaryTitles = computed<Record<keyof InsightsSummary, string>>(() => ({
 	total: i18n.baseText('insights.banner.title.total'),
 	failed: i18n.baseText('insights.banner.title.failed'),
@@ -158,7 +173,7 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
 								</N8nTooltip>
 							</strong>
 							<small :class="$style.days">
-								{{ timeRangeLabels[timeRange] }}
+								{{ displayDateRangeLabel }}
 							</small>
 							<span v-if="value === 0 && id === 'timeSaved'" :class="$style.empty">
 								<em>--</em>