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

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

@@ -0,0 +1,70 @@
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useMemo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const style = { width: '100%' };
+
+const AgentOverview = ({
+	type,
+	dateRange,
+	departmentId,
+}: {
+	type: string;
+	dateRange: { start: string; end: string };
+	departmentId: string;
+}) => {
+	const { t } = useTranslation();
+	const { start, end } = dateRange;
+
+	const params = useMemo(
+		() => ({
+			name: type,
+			from: start,
+			to: end,
+			...(departmentId && { departmentId }),
+		}),
+		[departmentId, end, start, type],
+	);
+
+	const [displayData, setDisplayData] = useState<{ head: { name: string }[]; data: { name: string; value: number | string }[] }>({
+		head: [],
+		data: [],
+	});
+
+	const loadData = useEndpoint('GET', '/v1/livechat/analytics/agent-overview');
+
+	useEffect(() => {
+		async function fetchData() {
+			if (!start || !end) {
+				return;
+			}
+			const value = await loadData(params);
+			setDisplayData(value);
+		}
+		fetchData();
+	}, [start, end, loadData, params]);
+
+	return (
+		<Table style={style} fixed>
+			<TableHead>
+				<TableRow>
+					{displayData.head?.map(({ name }, i) => (
+						<TableCell key={i}>{t(name as TranslationKey)}</TableCell>
+					))}
+				</TableRow>
+			</TableHead>
+			<TableBody>
+				{displayData.data?.map(({ name, value }, i) => (
+					<TableRow key={i}>
+						<TableCell>{name}</TableCell>
+						<TableCell>{value}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
+};
+
+export default AgentOverview;

apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.stories.tsx

@@ -0,0 +1,16 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import AnalyticsPage from './AnalyticsPage';
+
+export default {
+	component: AnalyticsPage,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { hideNoControlsWarning: true },
+	},
+} satisfies Meta<typeof AnalyticsPage>;
+
+export const Default: StoryObj<typeof AnalyticsPage> = {
+	render: () => <AnalyticsPage />,
+	name: 'AnalyticsPage',
+};

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

@@ -0,0 +1,110 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { Box, Select, Margins, Field, FieldLabel, FieldRow, Label, Option } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
+import { useMemo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AgentOverview from './AgentOverview';
+import DateRangePicker from './DateRangePicker';
+import InterchangeableChart from './InterchangeableChart';
+import Overview from './Overview';
+import AutoCompleteDepartment from '../components/AutoCompleteDepartment';
+
+const useOptions = (type: string): SelectOption[] => {
+	const { t } = useTranslation();
+	return useMemo(() => {
+		if (type === 'Conversations') {
+			return [
+				['Total_conversations', t('Total_conversations')],
+				['Avg_chat_duration', t('Avg_chat_duration')],
+				['Total_messages', t('Total_messages')],
+			];
+		}
+		return [
+			['Avg_first_response_time', t('Avg_first_response_time')],
+			['Best_first_response_time', t('Best_first_response_time')],
+			['Avg_response_time', t('Avg_response_time')],
+			['Avg_reaction_time', t('Avg_reaction_time')],
+		];
+	}, [t, type]);
+};
+
+const AnalyticsPage = () => {
+	const { t } = useTranslation();
+	const [type, setType] = useState('Conversations');
+	const [department, setDepartment] = useState<string | null>(null);
+	const [dateRange, setDateRange] = useState({ start: '', end: '' });
+	const [chartName, setChartName] = useState<string | undefined>();
+
+	const typeOptions: SelectOption[] = useMemo(
+		() => [
+			['Conversations', t('Conversations')],
+			['Productivity', t('Productivity')],
+		],
+		[t],
+	);
+
+	const graphOptions: SelectOption[] = useOptions(type);
+
+	useEffect(() => {
+		setChartName(graphOptions[0][0]);
+	}, [graphOptions]);
+
+	return (
+		<Page>
+			<PageHeader title={t('Analytics')} />
+			<PageScrollableContentWithShadow display='flex' flexDirection='column'>
+				<Margins block={4}>
+					<Box display='flex' marginInline='neg-x4' flexWrap='wrap' flexGrow={1}>
+						<Box display='flex' flexWrap='wrap' flexGrow={1}>
+							<Box display='flex' marginInline={4} flexDirection='column' flexGrow={1}>
+								<Label marginBlock={4}>{t('Type')}</Label>
+								<Select options={typeOptions} value={type} onChange={(value) => setType(String(value))} />
+							</Box>
+							<Box display='flex' marginInline={4} flexDirection='column' flexGrow={1}>
+								<Label marginBlock={4}>{t('Departments')}</Label>
+								<AutoCompleteDepartment
+									value={department || undefined}
+									onChange={setDepartment}
+									onlyMyDepartments
+									withTitle={false}
+									renderItem={({ label, ...props }) => <Option {...props} label={<span style={{ whiteSpace: 'normal' }}>{label}</span>} />}
+								/>
+							</Box>
+						</Box>
+						<DateRangePicker flexGrow={1} marginInline={4} onChange={setDateRange} />
+					</Box>
+					<Box>
+						<Overview type={type} dateRange={dateRange} departmentId={department || ''} />
+					</Box>
+					<Box display='flex'>
+						<Margins inline={2}>
+							<Field>
+								<FieldLabel>{t('Chart')}</FieldLabel>
+								<FieldRow>
+									<Select options={graphOptions} value={chartName} onChange={(value) => setChartName(String(value))} />
+								</FieldRow>
+							</Field>
+						</Margins>
+					</Box>
+					<Box display='flex' flexGrow={1} flexShrink={1}>
+						<InterchangeableChart
+							flexShrink={1}
+							width='66%'
+							height='100%'
+							chartName={chartName || ''}
+							departmentId={department || ''}
+							dateRange={dateRange}
+							alignSelf='stretch'
+						/>
+						<Box display='flex' width='33%' justifyContent='stretch' padding={10} marginInlineStart={4}>
+							<AgentOverview type={chartName || ''} dateRange={dateRange} departmentId={department || ''} />
+						</Box>
+					</Box>
+				</Margins>
+			</PageScrollableContentWithShadow>
+		</Page>
+	);
+};
+
+export default AnalyticsPage;

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

@@ -0,0 +1,16 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import DateRangePicker from './DateRangePicker';
+
+export default {
+	component: DateRangePicker,
+	parameters: {
+		layout: 'centered',
+		controls: { hideNoControlsWarning: true },
+		actions: { argTypesRegex: '^on.*' },
+	},
+} satisfies Meta<typeof DateRangePicker>;
+
+export const Default: StoryObj<typeof DateRangePicker> = {
+	name: 'DateRangePicker',
+};

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;

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

@@ -0,0 +1,119 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import type * as chartjs from 'chart.js';
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { secondsToHHMMSS } from '../../../../lib/utils/secondsToHHMMSS';
+import { drawLineChart } from '../chartHandler';
+import Chart from '../realTimeMonitoring/charts/Chart';
+
+const getChartTooltips = (chartName: string) => {
+	switch (chartName) {
+		case 'Avg_chat_duration':
+		case 'Avg_first_response_time':
+		case 'Best_first_response_time':
+		case 'Avg_response_time':
+		case 'Avg_reaction_time':
+			return {
+				callbacks: {
+					title([ctx]: [chartjs.TooltipItem<'line'>]) {
+						const { dataset } = ctx;
+						return dataset.label;
+					},
+					label(ctx: chartjs.TooltipItem<'line'>) {
+						const { dataset, dataIndex } = ctx;
+						const item = dataset.data[dataIndex];
+						return secondsToHHMMSS(typeof item === 'number' ? item : 0);
+					},
+				},
+			};
+		default:
+			return {};
+	}
+};
+
+const InterchangeableChart = ({
+	departmentId,
+	dateRange,
+	chartName,
+	...props
+}: {
+	departmentId: string;
+	dateRange: { start: string; end: string };
+	chartName: string;
+	flexShrink: number;
+	height: string;
+	width: string;
+	alignSelf: string;
+}) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const canvas = useRef<HTMLCanvasElement | null>(null);
+	const context = useRef<chartjs.Chart<'line', number[], string>>(undefined);
+
+	const { start, end } = dateRange;
+
+	const loadData = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts-data');
+
+	const draw = useStableCallback(
+		async (params: {
+			daterange: {
+				from: string;
+				to: string;
+			};
+			chartOptions: {
+				name: string;
+			};
+			departmentId?: string;
+		}) => {
+			try {
+				const tooltipCallbacks = getChartTooltips(chartName);
+				if (!params?.daterange?.from || !params?.daterange?.to) {
+					return;
+				}
+
+				const result = await loadData({
+					chartName,
+					start,
+					end,
+					...(departmentId && { departmentId }),
+				});
+
+				if (!result?.dataLabels || !result?.dataPoints) {
+					throw new Error('Error! fetching chart data.');
+				}
+				(context.current || typeof context.current === 'undefined') &&
+					canvas.current &&
+					(context.current = await drawLineChart(
+						canvas.current,
+						context.current,
+						[result.chartLabel],
+						result.dataLabels,
+						[result.dataPoints],
+						{
+							tooltipCallbacks,
+						},
+					));
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+	);
+
+	useEffect(() => {
+		draw({
+			daterange: {
+				from: start,
+				to: end,
+			},
+			chartOptions: { name: chartName },
+			...(departmentId && { departmentId }),
+		});
+	}, [chartName, departmentId, draw, end, start, t, loadData]);
+
+	return <Chart canvasRef={canvas} {...props} />;
+};
+
+export default InterchangeableChart;

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

@@ -0,0 +1,80 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useEffect, useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CounterItem from '../realTimeMonitoring/counter/CounterItem';
+import CounterRow from '../realTimeMonitoring/counter/CounterRow';
+
+const initialData: { title?: string; value: string | number }[] = Array.from({ length: 3 }).map(() => ({ title: undefined, value: '' }));
+
+const conversationsInitialData = [initialData, initialData];
+const productivityInitialData = [initialData];
+
+export type OverviewProps = { type: string; dateRange: { start: string; end: string }; departmentId: string };
+
+const Overview = ({ type, dateRange, departmentId }: OverviewProps) => {
+	const { t } = useTranslation();
+
+	const { start, end } = dateRange;
+
+	const params = useMemo(
+		() => ({
+			name: type,
+			from: start,
+			to: end,
+			...(departmentId && { departmentId }),
+		}),
+		[departmentId, end, start, type],
+	);
+
+	const loadData = useEndpoint('GET', '/v1/livechat/analytics/overview');
+
+	const [displayData, setDisplayData] = useState(conversationsInitialData);
+
+	useEffect(() => {
+		setDisplayData(type === 'Conversations' ? conversationsInitialData : productivityInitialData);
+	}, [type]);
+
+	useEffect(() => {
+		async function fetchData() {
+			if (!start || !end) {
+				return;
+			}
+
+			const value = await loadData(params);
+			if (!value) {
+				return;
+			}
+
+			if (value.length > 3) {
+				return setDisplayData([value.slice(0, 3), value.slice(3)]);
+			}
+
+			setDisplayData([value]);
+		}
+		fetchData();
+	}, [start, end, loadData, params]);
+
+	return (
+		<Box paddingBlock={28} flexDirection='column'>
+			{displayData.map((items = [], i) => (
+				<CounterRow key={i} border='0' paddingBlock='none'>
+					{items.map(({ title, value }, i) => (
+						<CounterItem
+							flexShrink={1}
+							paddingBlock={8}
+							flexBasis='100%'
+							key={i}
+							title={title ? t(title as TranslationKey) : <Skeleton width='x60' />}
+							count={value}
+						/>
+					))}
+				</CounterRow>
+			))}
+		</Box>
+	);
+};
+
+export default Overview;