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

apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx

@@ -0,0 +1,153 @@
+import { Box, InputBox, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { subDays, subMonths, startOfMonth, endOfMonth, format } from 'date-fns';
+import type { ComponentProps, ChangeEvent } from 'react';
+import { useState, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type DateRangePickerProps = Omit<ComponentProps<typeof Box>, 'onChange'> & {
+	onChange(range: { start: string; end: string }): void;
+};
+
+const formatToDateInput = (date: Date) => format(date, 'yyyy-MM-dd');
+
+const getTodayDate = () => formatToDateInput(new Date());
+
+const getMonthRange = (monthsToSubtractFromToday: number) => {
+	const now = new Date();
+	const startDate = monthsToSubtractFromToday === 0 ? startOfMonth(now) : startOfMonth(subMonths(now, monthsToSubtractFromToday));
+	const endDate = monthsToSubtractFromToday === 0 ? now : endOfMonth(subMonths(now, monthsToSubtractFromToday));
+	return {
+		start: formatToDateInput(startDate),
+		end: formatToDateInput(endDate),
+	};
+};
+
+const getWeekRange = (daysToSubtractFromStart: number, daysToSubtractFromEnd: number) => {
+	const now = new Date();
+	return {
+		start: formatToDateInput(subDays(now, daysToSubtractFromStart)),
+		end: formatToDateInput(subDays(now, daysToSubtractFromEnd)),
+	};
+};
+
+const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePickerProps) => {
+	const { t } = useTranslation();
+	const todayDate = useMemo(() => getTodayDate(), []);
+	const [range, setRange] = useState({ start: todayDate, end: todayDate });
+
+	const { start, end } = range;
+
+	const handleStart = useStableCallback(({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
+		const rangeObj = {
+			start: currentTarget.value,
+			end: range.end,
+		};
+		setRange(rangeObj);
+		onChange(rangeObj);
+	});
+
+	const handleEnd = useStableCallback(({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
+		const rangeObj = {
+			end: currentTarget.value,
+			start: range.start,
+		};
+		setRange(rangeObj);
+		onChange(rangeObj);
+	});
+
+	const handleRange = useStableCallback((range: { start: string; end: string }) => {
+		setRange(range);
+		onChange(range);
+	});
+
+	useEffect(() => {
+		handleRange({
+			start: todayDate,
+			end: todayDate,
+		});
+	}, [handleRange, todayDate]);
+
+	const options = useMemo(
+		() => [
+			{
+				id: 'today',
+				icon: 'history' as const,
+				content: t('Today'),
+				onClick: () => {
+					handleRange(getWeekRange(0, 0));
+				},
+			},
+			{
+				id: 'yesterday',
+				icon: 'history' as const,
+				content: t('Yesterday'),
+				onClick: () => {
+					handleRange(getWeekRange(1, 1));
+				},
+			},
+			{
+				id: 'thisWeek',
+				icon: 'history' as const,
+				content: t('This_week'),
+				onClick: () => {
+					handleRange(getWeekRange(7, 0));
+				},
+			},
+			{
+				id: 'previousWeek',
+				icon: 'history' as const,
+				content: t('Previous_week'),
+				onClick: () => {
+					handleRange(getWeekRange(14, 7));
+				},
+			},
+			{
+				id: 'thisMonth',
+				icon: 'history' as const,
+				content: t('This_month'),
+				onClick: () => {
+					handleRange(getMonthRange(0));
+				},
+			},
+			{
+				id: 'lastMonth',
+				icon: 'history' as const,
+				content: t('Previous_month'),
+				onClick: () => {
+					handleRange(getMonthRange(1));
+				},
+			},
+		],
+		[handleRange, t],
+	);
+
+	return (
+		<Box {...props}>
+			<Box marginInline='neg-x4' height='full' display='flex' flexDirection='row'>
+				<Field marginInline={4} flexShrink={1} flexGrow={1}>
+					<FieldLabel>{t('Start')}</FieldLabel>
+					<FieldRow>
+						<Box height='x40' display='flex' width='full'>
+							<InputBox type='date' onChange={handleStart} max={todayDate} value={start} />
+						</Box>
+					</FieldRow>
+				</Field>
+				<Field marginInline={4} flexShrink={1} flexGrow={1}>
+					<FieldLabel>{t('End')}</FieldLabel>
+					<FieldRow>
+						<Box height='x40' display='flex' width='full'>
+							<InputBox type='date' onChange={handleEnd} min={start} max={todayDate} value={end} />
+						</Box>
+						<Box marginInlineStart={8}>
+							<GenericMenu title={t('Date_range_presets')} items={options} small />
+						</Box>
+					</FieldRow>
+				</Field>
+			</Box>
+		</Box>
+	);
+};
+
+export default DateRangePicker;