snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/dashboards/DownloadDataButton.tsx

@@ -0,0 +1,61 @@
+import type { Box } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { downloadCsvAs } from '../../lib/download';
+
+type RowFor<THeaders extends readonly string[]> = readonly unknown[] & {
+	length: THeaders['length'];
+};
+
+type DownloadDataButtonProps<THeaders extends readonly string[]> = {
+	attachmentName: string;
+	headers: RowFor<THeaders>;
+	dataAvailable: boolean;
+	dataExtractor: () => Promise<RowFor<THeaders>[] | undefined> | RowFor<THeaders>[] | undefined;
+} & Omit<ComponentProps<typeof Box>, 'attachmentName' | 'headers' | 'data'>;
+
+const DownloadDataButton = <H extends readonly string[]>({
+	attachmentName,
+	headers,
+	dataAvailable,
+	dataExtractor,
+	...props
+}: DownloadDataButtonProps<H>) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const handleClick = (): void => {
+		if (!dataAvailable) {
+			return;
+		}
+
+		Promise.resolve(dataExtractor())
+			.then((data) => {
+				if (!data) {
+					return;
+				}
+
+				downloadCsvAs([headers, ...data], attachmentName);
+			})
+			.catch((error) => {
+				dispatchToastMessage({ type: 'error', message: error });
+			});
+	};
+
+	return (
+		<IconButton
+			secondary
+			small
+			disabled={!dataAvailable}
+			onClick={handleClick}
+			aria-label={t('Download_Info')}
+			icon='download'
+			{...props}
+		/>
+	);
+};
+
+export default DownloadDataButton;

apps/meteor/client/components/dashboards/PeriodSelector.tsx

@@ -0,0 +1,31 @@
+import { Select } from '@rocket.chat/fuselage';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { Period } from './periods';
+import { getPeriod } from './periods';
+
+type PeriodSelectorProps<TPeriod extends Period['key']> = {
+	periods: TPeriod[];
+	value: TPeriod;
+	name?: string;
+	onChange: (value: TPeriod) => void;
+};
+
+const PeriodSelector = <TPeriod extends Period['key']>({ periods, value, name, onChange }: PeriodSelectorProps<TPeriod>) => {
+	const { t } = useTranslation();
+
+	const options = useMemo<[string, string][]>(() => periods.map((period) => [period, t(...getPeriod(period).label)]), [periods, t]);
+
+	return (
+		<Select
+			name={name}
+			options={options}
+			value={value}
+			onChange={(value): void => onChange(value as TPeriod)}
+			aria-label={t('Select_period')}
+		/>
+	);
+};
+
+export default PeriodSelector;

apps/meteor/client/components/dashboards/getClosedPeriod.spec.ts

@@ -0,0 +1,62 @@
+import { getClosedPeriod } from './periods';
+
+jest.useFakeTimers();
+jest.setSystemTime(Date.parse('2024-05-19T12:00:00.000Z'));
+
+it('should return the correct period range for this month', () => {
+	const period = getClosedPeriod({ startOf: 'month' })(true);
+
+	expect(period.start).toEqual(new Date('2024-05-01T00:00:00.000Z'));
+	expect(period.end).toEqual(new Date('2024-05-19T23:59:59.999Z'));
+});
+
+it('should return the correct period range for this year', () => {
+	const period = getClosedPeriod({ startOf: 'year' })(true);
+
+	expect(period.start).toEqual(new Date('2024-01-01T00:00:00.000Z'));
+	expect(period.end).toEqual(new Date('2024-05-19T23:59:59.999Z'));
+});
+
+it('should return the correct period range for last 6 months', () => {
+	const period = getClosedPeriod({ startOf: 'month', subtract: { amount: 6, unit: 'months' } })(true);
+
+	expect(period.start).toEqual(new Date('2023-11-01T00:00:00.000Z'));
+	expect(period.end).toEqual(new Date('2024-05-19T23:59:59.999Z'));
+});
+
+it('should return the correct period range for this week', () => {
+	const period = getClosedPeriod({ startOf: 'week' })(true);
+
+	expect(period.start).toEqual(new Date('2024-05-19T00:00:00.000Z'));
+	expect(period.end).toEqual(new Date('2024-05-19T23:59:59.999Z'));
+});
+
+describe('using local time', () => {
+	it('should return the correct period range for this month', () => {
+		const period = getClosedPeriod({ startOf: 'month' })(false);
+
+		expect(period.start).toEqual(new Date('2024-05-01T00:00:00.000'));
+		expect(period.end).toEqual(new Date('2024-05-19T23:59:59.999'));
+	});
+
+	it('should return the correct period range for this year', () => {
+		const period = getClosedPeriod({ startOf: 'year' })(false);
+
+		expect(period.start).toEqual(new Date('2024-01-01T00:00:00.000'));
+		expect(period.end).toEqual(new Date('2024-05-19T23:59:59.999'));
+	});
+
+	it('should return the correct period range for last 6 months', () => {
+		const period = getClosedPeriod({ startOf: 'month', subtract: { amount: 6, unit: 'months' } })(false);
+
+		expect(period.start).toEqual(new Date('2023-11-01T00:00:00.000'));
+		expect(period.end).toEqual(new Date('2024-05-19T23:59:59.999'));
+	});
+
+	it('should return the correct period range for this week', () => {
+		const period = getClosedPeriod({ startOf: 'week' })(false);
+
+		expect(period.start).toEqual(new Date('2024-05-19T00:00:00.000'));
+		expect(period.end).toEqual(new Date('2024-05-19T23:59:59.999'));
+	});
+});

apps/meteor/client/components/dashboards/periods.ts

@@ -0,0 +1,167 @@
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { startOfDay, startOfWeek, startOfMonth, startOfYear, endOfDay, subDays, subMonths } from 'date-fns';
+
+const label = (translationKey: TranslationKey): readonly [translationKey: TranslationKey] => [translationKey];
+
+function startOfDayUTC(d: Date): Date {
+	return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), 0, 0, 0, 0));
+}
+
+function endOfDayUTC(d: Date): Date {
+	return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), 23, 59, 59, 999));
+}
+
+function startOfWeekUTC(d: Date): Date {
+	const day = d.getUTCDay(); // 0 = Sunday
+	const sunday = new Date(d);
+	sunday.setUTCDate(d.getUTCDate() - day);
+	return startOfDayUTC(sunday);
+}
+
+function startOfMonthUTC(d: Date): Date {
+	return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1, 0, 0, 0, 0));
+}
+
+function startOfYearUTC(d: Date): Date {
+	return new Date(Date.UTC(d.getUTCFullYear(), 0, 1, 0, 0, 0, 0));
+}
+
+type StartOf = 'day' | 'year' | 'month' | 'week';
+type Subtract = { amount: number; unit: 'days' | 'months' };
+
+export const getClosedPeriod =
+	({
+		startOf: startOfKey,
+		subtract: subtractOpt,
+	}: {
+		startOf: StartOf;
+		subtract?: Subtract;
+	}): ((utc: boolean) => {
+		start: Date;
+		end: Date;
+	}) =>
+	(utc: boolean): { start: Date; end: Date } => {
+		const now = new Date();
+
+		let start: Date;
+		if (subtractOpt) {
+			const { amount, unit } = subtractOpt;
+			start = unit === 'days' ? subDays(now, amount) : subMonths(now, amount);
+		} else {
+			start = new Date(now.getTime());
+		}
+
+		if (utc) {
+			switch (startOfKey) {
+				case 'day':
+					start = startOfDayUTC(start);
+					break;
+				case 'week':
+					start = startOfWeekUTC(start);
+					break;
+				case 'month':
+					start = startOfMonthUTC(start);
+					break;
+				case 'year':
+					start = startOfYearUTC(start);
+					break;
+			}
+			return { start, end: endOfDayUTC(now) };
+		}
+
+		switch (startOfKey) {
+			case 'day':
+				start = startOfDay(start);
+				break;
+			case 'week':
+				start = startOfWeek(start);
+				break;
+			case 'month':
+				start = startOfMonth(start);
+				break;
+			case 'year':
+				start = startOfYear(start);
+				break;
+		}
+
+		return {
+			start,
+			end: endOfDay(now),
+		};
+	};
+
+const periods = [
+	{
+		key: 'today',
+		label: label('Today'),
+		range: getClosedPeriod({ startOf: 'day' }),
+	},
+	{
+		key: 'this week',
+		label: label('This_week'),
+		range: getClosedPeriod({ startOf: 'week' }),
+	},
+	{
+		key: 'last 7 days',
+		label: label('Last_7_days'),
+		range: getClosedPeriod({ startOf: 'day', subtract: { amount: 7, unit: 'days' } }),
+	},
+	{
+		key: 'last 15 days',
+		label: label('Last_15_days'),
+		range: getClosedPeriod({ startOf: 'day', subtract: { amount: 15, unit: 'days' } }),
+	},
+	{
+		key: 'this month',
+		label: label('This_month'),
+		range: getClosedPeriod({ startOf: 'month' }),
+	},
+	{
+		key: 'last 30 days',
+		label: label('Last_30_days'),
+		range: getClosedPeriod({ startOf: 'day', subtract: { amount: 30, unit: 'days' } }),
+	},
+	{
+		key: 'last 90 days',
+		label: label('Last_90_days'),
+		range: getClosedPeriod({ startOf: 'day', subtract: { amount: 90, unit: 'days' } }),
+	},
+	{
+		key: 'last 6 months',
+		label: label('Last_6_months'),
+		range: getClosedPeriod({ startOf: 'month', subtract: { amount: 6, unit: 'months' } }),
+	},
+	{
+		key: 'this year',
+		label: label('This_year'),
+		range: getClosedPeriod({ startOf: 'year' }),
+	},
+] as const;
+
+export type Period = (typeof periods)[number];
+
+export const getPeriod = (key: (typeof periods)[number]['key']): Period => {
+	const period = periods.find((period) => period.key === key);
+
+	if (!period) {
+		return periods[0];
+	}
+
+	return period;
+};
+
+export const getPeriodRange = (
+	key: (typeof periods)[number]['key'],
+	utc = true,
+): {
+	start: Date;
+	end: Date;
+} => {
+	const period = periods.find((period) => period.key === key);
+
+	if (!period) {
+		return periods[0].range(utc);
+	}
+
+	return period.range(utc);
+};

apps/meteor/client/components/dashboards/usePeriodLabel.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { Period } from './periods';
+import { getPeriod } from './periods';
+
+export const usePeriodLabel = (period: Period['key']): string => {
+	const { t } = useTranslation();
+
+	return useMemo(() => t(...getPeriod(period).label), [period, t]);
+};

apps/meteor/client/components/dashboards/usePeriodSelectorState.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+import type { Period } from './periods';
+
+export const usePeriodSelectorState = <TPeriod extends Period['key']>(
+	...periods: TPeriod[]
+): [
+	period: TPeriod,
+	periodSelectorProps: {
+		periods: TPeriod[];
+		value: TPeriod;
+		onChange: (value: TPeriod) => void;
+	},
+] => {
+	const [period, setPeriod] = useState<TPeriod>(periods[0]);
+
+	return [
+		period,
+		{
+			periods,
+			value: period,
+			onChange: (value): void => setPeriod(value),
+		},
+	];
+};

apps/meteor/client/components/dashboards/usePeriodSelectorStorage.ts

@@ -0,0 +1,26 @@
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+
+import type { Period } from './periods';
+
+export const usePeriodSelectorStorage = <TPeriod extends Period['key']>(
+	storageKey: string,
+	periods: TPeriod[],
+): [
+	period: TPeriod,
+	periodSelectorProps: {
+		periods: TPeriod[];
+		value: TPeriod;
+		onChange: (value: TPeriod) => void;
+	},
+] => {
+	const [period, setPeriod] = useLocalStorage<TPeriod>(storageKey, periods[0]);
+
+	return [
+		period,
+		{
+			periods,
+			value: period,
+			onChange: (value): void => setPeriod(value),
+		},
+	];
+};