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

apps/meteor/client/views/omnichannel/reports/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useAgentsSection';
+export * from './useDepartmentsSection';
+export * from './useStatusSection';
+export * from './useTagsSection';
+export * from './useChannelsSection';
+export * from './useDefaultDownload';

apps/meteor/client/views/omnichannel/reports/hooks/useAgentsSection.ts

@@ -0,0 +1,97 @@
+import { useSort } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDefaultDownload } from './useDefaultDownload';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+import { usePeriodSelectorStorage } from '../../../../components/dashboards/usePeriodSelectorStorage';
+import { COLORS, PERIOD_OPTIONS } from '../components/constants';
+import { formatPeriodDescription } from '../utils/formatPeriodDescription';
+
+const formatChartData = (data: { label: string; value: number }[] | undefined = []) =>
+	data.map((item) => ({
+		...item,
+		color: COLORS.info,
+	}));
+
+export const useAgentsSection = () => {
+	const { t } = useTranslation();
+	const [period, periodSelectorProps] = usePeriodSelectorStorage('reports-agents-period', PERIOD_OPTIONS);
+	const getConversationsByAgent = useEndpoint('GET', '/v1/livechat/analytics/dashboards/conversations-by-agent');
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'total'>('total', 'desc');
+
+	const {
+		data: { data, total = 0, unspecified = 0 } = { data: [], total: 0 },
+		refetch,
+		isPending,
+		isError,
+		isSuccess,
+	} = useQuery({
+		queryKey: ['omnichannel-reports', 'conversations-by-agent', period, sortBy, sortDirection],
+
+		queryFn: async () => {
+			const { start, end } = getPeriodRange(period);
+			const response = await getConversationsByAgent({
+				start: start.toISOString(),
+				end: end.toISOString(),
+				sort: JSON.stringify({ [sortBy]: sortDirection === 'asc' ? 1 : -1 }),
+			});
+			return { ...response, data: formatChartData(response.data) };
+		},
+
+		refetchInterval: 5 * 60 * 1000,
+	});
+
+	const title = t('Conversations_by_agents');
+
+	const subtitleTotals = t('__agents__agents_and__count__conversations__period__', {
+		agents: data.length ?? 0,
+		count: total,
+		period: formatPeriodDescription(period, t),
+	});
+	const subtitleUnspecified = unspecified > 0 ? `(${t('__count__without__assignee__', { count: unspecified })})` : '';
+	const subtitle = `${subtitleTotals} ${subtitleUnspecified}`;
+	const emptyStateSubtitle = t('Omnichannel_Reports_Agents_Empty_Subtitle');
+
+	const downloadProps = useDefaultDownload({ columnName: t('Agents'), title, data, period });
+
+	return useMemo(
+		() => ({
+			id: 'conversations-by-agent',
+			title,
+			subtitle,
+			emptyStateSubtitle,
+			data,
+			total,
+			isPending,
+			isError,
+			isDataFound: isSuccess && data.length > 0,
+			periodSelectorProps,
+			period,
+			downloadProps,
+			sortBy,
+			sortDirection,
+			setSort,
+			onRetry: refetch,
+		}),
+		[
+			title,
+			subtitle,
+			emptyStateSubtitle,
+			data,
+			total,
+			isPending,
+			isError,
+			isSuccess,
+			periodSelectorProps,
+			period,
+			downloadProps,
+			sortBy,
+			sortDirection,
+			setSort,
+			refetch,
+		],
+	);
+};

apps/meteor/client/views/omnichannel/reports/hooks/useChannelsSection.ts

@@ -0,0 +1,93 @@
+import { capitalize } from '@rocket.chat/tools';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { TFunction } from 'i18next';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDefaultDownload } from './useDefaultDownload';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+import { usePeriodSelectorStorage } from '../../../../components/dashboards/usePeriodSelectorStorage';
+import { PERIOD_OPTIONS } from '../components/constants';
+import { formatPeriodDescription } from '../utils/formatPeriodDescription';
+import { getTop } from '../utils/getTop';
+import { round } from '../utils/round';
+
+type DataItem = { label: string; value: number; id: string; rawLabel: string };
+
+const TYPE_LABEL: Record<string, TranslationKey> = {
+	'widget': 'Livechat',
+	'email-inbox': 'Email',
+	'twilio': 'SMS',
+	'api': 'Custom_Integration',
+};
+
+const formatItem = (item: { label: string; value: number }, total: number, t: TFunction): DataItem => {
+	const percentage = total > 0 ? round((item.value / total) * 100) : 0;
+	const label = `${t(TYPE_LABEL[item.label]) || capitalize(item.label)}`;
+	return {
+		...item,
+		label: `${label} ${item.value} (${percentage}%)`,
+		rawLabel: label,
+		id: item.label,
+	};
+};
+
+const formatChartData = (data: { label: string; value: number }[] | undefined = [], total = 0, t: TFunction) => {
+	return data.map((item) => formatItem(item, total, t));
+};
+
+export const useChannelsSection = () => {
+	const { t } = useTranslation();
+	const [period, periodSelectorProps] = usePeriodSelectorStorage('reports-channels-period', PERIOD_OPTIONS);
+	const getConversationsBySource = useEndpoint('GET', '/v1/livechat/analytics/dashboards/conversations-by-source');
+
+	const {
+		data: { data, rawData, total } = { data: [], rawData: [], total: 0 },
+		refetch,
+		isPending,
+		isError,
+		isSuccess,
+	} = useQuery({
+		queryKey: ['omnichannel-reports', 'conversations-by-source', period],
+
+		queryFn: async () => {
+			const { start, end } = getPeriodRange(period);
+			const response = await getConversationsBySource({ start: start.toISOString(), end: end.toISOString() });
+			const data = formatChartData(response.data, response.total, t);
+			const displayData: DataItem[] = getTop<DataItem>(5, data, (value) => formatItem({ label: t('Others'), value }, response.total, t));
+			return { ...response, data: displayData, rawData: data };
+		},
+
+		refetchInterval: 5 * 60 * 1000,
+	});
+
+	const title = t('Conversations_by_channel');
+	const subtitle = t('__count__conversations__period__', {
+		count: total ?? 0,
+		period: formatPeriodDescription(period, t),
+	});
+	const emptyStateSubtitle = t('Omnichannel_Reports_Channels_Empty_Subtitle');
+
+	const downloadProps = useDefaultDownload({ columnName: t('Channel'), title, data: rawData, period });
+
+	return useMemo(
+		() => ({
+			id: 'conversations-by-channel',
+			title,
+			subtitle,
+			emptyStateSubtitle,
+			data,
+			total,
+			isPending,
+			isError,
+			isDataFound: isSuccess && data.length > 0,
+			periodSelectorProps,
+			period,
+			downloadProps,
+			onRetry: refetch,
+		}),
+		[title, subtitle, emptyStateSubtitle, data, total, isPending, isError, isSuccess, periodSelectorProps, period, downloadProps, refetch],
+	);
+};

apps/meteor/client/views/omnichannel/reports/hooks/useDefaultDownload.ts

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { Period } from '../../../../components/dashboards/periods';
+import { formatAttachmentName } from '../utils/formatAttachmentName';
+import { formatPeriodRange } from '../utils/formatPeriodRange';
+
+type DefaultDownloadHookProps = {
+	columnName: string;
+	title: string;
+	period: Period['key'];
+	data: { rawLabel?: string; label: string; value: number }[];
+};
+
+export const useDefaultDownload = ({ columnName, title, period, data }: DefaultDownloadHookProps) => {
+	const { t } = useTranslation();
+	return useMemo(() => {
+		const { start, end } = formatPeriodRange(period);
+
+		return {
+			attachmentName: formatAttachmentName(title, start, end),
+			headers: [t('From'), t('To'), columnName, t('Total')],
+			dataAvailable: data.length > 0,
+			dataExtractor() {
+				return data?.map(({ label, rawLabel, value }) => [start, end, rawLabel || label, value]);
+			},
+		};
+	}, [columnName, data, period, t, title]);
+};

apps/meteor/client/views/omnichannel/reports/hooks/useDepartmentsSection.ts

@@ -0,0 +1,71 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDefaultDownload } from './useDefaultDownload';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+import { usePeriodSelectorStorage } from '../../../../components/dashboards/usePeriodSelectorStorage';
+import { COLORS, PERIOD_OPTIONS } from '../components/constants';
+import { formatPeriodDescription } from '../utils/formatPeriodDescription';
+
+const formatChartData = (data: { label: string; value: number }[] | undefined = []) =>
+	data.map((item) => ({
+		...item,
+		color: COLORS.info,
+	}));
+
+export const useDepartmentsSection = () => {
+	const { t } = useTranslation();
+	const [period, periodSelectorProps] = usePeriodSelectorStorage('reports-department-period', PERIOD_OPTIONS);
+	const getConversationsByDepartment = useEndpoint('GET', '/v1/livechat/analytics/dashboards/conversations-by-department');
+
+	const {
+		data: { data, total = 0, unspecified = 0 } = { data: [], total: 0 },
+		isPending,
+		isError,
+		isSuccess,
+		refetch,
+	} = useQuery({
+		queryKey: ['omnichannel-reports', 'conversations-by-department', period],
+
+		queryFn: async () => {
+			const { start, end } = getPeriodRange(period);
+			const response = await getConversationsByDepartment({ start: start.toISOString(), end: end.toISOString() });
+			return { ...response, data: formatChartData(response.data) };
+		},
+
+		refetchInterval: 5 * 60 * 1000,
+	});
+
+	const title = t('Conversations_by_department');
+	const subtitleTotals = t('__departments__departments_and__count__conversations__period__', {
+		departments: data.length ?? 0,
+		count: total,
+		period: formatPeriodDescription(period, t),
+	});
+	const subtitleUnspecified = unspecified > 0 ? `(${t('__count__without__department__', { count: unspecified })})` : '';
+	const subtitle = `${subtitleTotals} ${subtitleUnspecified}`;
+	const emptyStateSubtitle = t('Omnichannel_Reports_Departments_Empty_Subtitle');
+
+	const downloadProps = useDefaultDownload({ columnName: t('Departments'), title, data, period });
+
+	return useMemo(
+		() => ({
+			id: 'conversations-by-department',
+			title,
+			subtitle,
+			emptyStateSubtitle,
+			data,
+			total,
+			isPending,
+			isError,
+			isDataFound: isSuccess && data.length > 0,
+			periodSelectorProps,
+			period,
+			downloadProps,
+			onRetry: refetch,
+		}),
+		[title, subtitle, emptyStateSubtitle, data, total, isPending, isError, isSuccess, periodSelectorProps, period, downloadProps, refetch],
+	);
+};

apps/meteor/client/views/omnichannel/reports/hooks/useStatusSection.ts

@@ -0,0 +1,88 @@
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { TFunction } from 'i18next';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDefaultDownload } from './useDefaultDownload';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+import { usePeriodSelectorStorage } from '../../../../components/dashboards/usePeriodSelectorStorage';
+import { COLORS, PERIOD_OPTIONS } from '../components/constants';
+import { formatPeriodDescription } from '../utils/formatPeriodDescription';
+import { round } from '../utils/round';
+
+const STATUSES: Record<string, { label: TranslationKey; color: string }> = {
+	Open: { label: 'Omnichannel_Reports_Status_Open', color: COLORS.success },
+	Queued: { label: 'Queued', color: COLORS.warning2 },
+	On_Hold: { label: 'On_Hold', color: COLORS.warning },
+	Closed: { label: 'Omnichannel_Reports_Status_Closed', color: COLORS.danger },
+};
+
+const formatChartData = (data: { label: string; value: number }[] | undefined = [], total = 0, t: TFunction) => {
+	return data.map((item) => {
+		const status = STATUSES[item.label];
+		const percentage = total > 0 ? round((item.value / total) * 100) : 0;
+		const label = t(status.label);
+		return {
+			...item,
+			id: item.label,
+			label: `${label} ${item.value} (${percentage}%)`,
+			rawLabel: label,
+			color: status.color,
+		};
+	});
+};
+
+export const useStatusSection = () => {
+	const { t } = useTranslation();
+	const [period, periodSelectorProps] = usePeriodSelectorStorage('reports-status-period', PERIOD_OPTIONS);
+	const getConversationsByStatus = useEndpoint('GET', '/v1/livechat/analytics/dashboards/conversations-by-status');
+	const { start, end } = getPeriodRange(period);
+
+	const {
+		data: { data, total } = { data: [], total: 0 },
+		isPending,
+		isError,
+		isSuccess,
+		refetch,
+	} = useQuery({
+		queryKey: ['omnichannel-reports', 'conversations-by-status', period, t],
+
+		queryFn: async () => {
+			const response = await getConversationsByStatus({ start: start.toISOString(), end: end.toISOString() });
+
+			return { ...response, data: formatChartData(response.data, response.total, t) };
+		},
+
+		refetchInterval: 5 * 60 * 1000,
+	});
+
+	const title = t('Conversations_by_status');
+	const subtitle = t('__count__conversations__period__', {
+		count: total ?? 0,
+		period: formatPeriodDescription(period, t),
+	});
+	const emptyStateSubtitle = t('Omnichannel_Reports_Status_Empty_Subtitle');
+
+	const downloadProps = useDefaultDownload({ columnName: t('Status'), title, data, period });
+
+	return useMemo(
+		() => ({
+			id: 'conversations-by-status',
+			title,
+			subtitle,
+			emptyStateSubtitle,
+			data,
+			total,
+			period,
+			periodSelectorProps,
+			downloadProps,
+			isPending,
+			isError,
+			isDataFound: isSuccess && data.length > 0,
+			onRetry: refetch,
+		}),
+		[title, subtitle, emptyStateSubtitle, data, total, period, periodSelectorProps, downloadProps, isPending, isError, isSuccess, refetch],
+	);
+};

apps/meteor/client/views/omnichannel/reports/hooks/useTagsSection.ts

@@ -0,0 +1,79 @@
+import { Palette } from '@rocket.chat/fuselage';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDefaultDownload } from './useDefaultDownload';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+import { usePeriodSelectorStorage } from '../../../../components/dashboards/usePeriodSelectorStorage';
+import { PERIOD_OPTIONS } from '../components/constants';
+import { formatPeriodDescription } from '../utils/formatPeriodDescription';
+
+const colors = {
+	warning: Palette.statusColor['status-font-on-warning'].toString(),
+	danger: Palette.statusColor['status-font-on-danger'].toString(),
+	success: Palette.statusColor['status-font-on-success'].toString(),
+	info: Palette.statusColor['status-font-on-info'].toString(),
+};
+
+const formatChartData = (data: { label: string; value: number }[] | undefined = []) =>
+	data.map((item) => ({
+		...item,
+		color: colors.info,
+	}));
+
+export const useTagsSection = () => {
+	const { t } = useTranslation();
+	const [period, periodSelectorProps] = usePeriodSelectorStorage('reports-tags-period', PERIOD_OPTIONS);
+	const getConversationsByTags = useEndpoint('GET', '/v1/livechat/analytics/dashboards/conversations-by-tags');
+
+	const {
+		data: { data, total = 0, unspecified = 0 } = { data: [], total: 0 },
+		refetch,
+		isPending,
+		isError,
+		isSuccess,
+	} = useQuery({
+		queryKey: ['omnichannel-reports', 'conversations-by-tags', period],
+
+		queryFn: async () => {
+			const { start, end } = getPeriodRange(period);
+			const response = await getConversationsByTags({ start: start.toISOString(), end: end.toISOString() });
+			return { ...response, data: formatChartData(response.data) };
+		},
+
+		refetchInterval: 5 * 60 * 1000,
+	});
+
+	const title = t('Conversations_by_tag');
+	const subtitleTotals = t('__count__tags__and__count__conversations__period__', {
+		count: data.length,
+		conversations: total,
+		period: formatPeriodDescription(period, t),
+	});
+	const subtitleUnspecified = unspecified > 0 ? `(${t('__count__without__tags__', { count: unspecified })})` : '';
+	const subtitle = `${subtitleTotals} ${subtitleUnspecified}`;
+	const emptyStateSubtitle = t('Omnichannel_Reports_Tags_Empty_Subtitle');
+
+	const downloadProps = useDefaultDownload({ columnName: t('Tags'), title, data, period });
+
+	return useMemo(
+		() => ({
+			id: 'conversations-by-tags',
+			title,
+			subtitle,
+			emptyStateSubtitle,
+			data,
+			total,
+			period,
+			periodSelectorProps,
+			downloadProps,
+			isError,
+			isPending,
+			isDataFound: isSuccess && data.length > 0,
+			onRetry: refetch,
+		}),
+		[title, subtitle, emptyStateSubtitle, data, total, isError, isPending, isSuccess, periodSelectorProps, period, downloadProps, refetch],
+	);
+};