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

apps/meteor/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx

@@ -0,0 +1,232 @@
+import { ResponsivePie } from '@nivo/pie';
+import {
+	Box,
+	FlexContainer,
+	FlexItem,
+	Icon,
+	Margins,
+	Skeleton,
+	Table,
+	Tile,
+	Palette,
+	Tooltip,
+	TableHead,
+	TableRow,
+	TableBody,
+	TableCell,
+} from '@rocket.chat/fuselage';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useMessageOrigins } from './useMessageOrigins';
+import { useTopFivePopularChannels } from './useTopFivePopularChannels';
+import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton';
+import PeriodSelector from '../../../../components/dashboards/PeriodSelector';
+import { usePeriodSelectorState } from '../../../../components/dashboards/usePeriodSelectorState';
+import EngagementDashboardCardFilter from '../EngagementDashboardCardFilter';
+import LegendSymbol from '../dataView/LegendSymbol';
+
+const colors = {
+	warning: Palette.statusColor['status-font-on-warning'].toString(),
+	success: Palette.statusColor['status-font-on-success'].toString(),
+	info: Palette.statusColor['status-font-on-info'].toString(),
+};
+const MessagesPerChannelSection = () => {
+	const [period, periodSelectorProps] = usePeriodSelectorState('last 7 days', 'last 30 days', 'last 90 days');
+
+	const { t } = useTranslation();
+
+	const { data: messageOriginsData } = useMessageOrigins({ period });
+	const { data: topFivePopularChannelsData } = useTopFivePopularChannels({ period });
+
+	const pie = useMemo(
+		() => messageOriginsData?.origins?.reduce<{ [roomType: string]: number }>((obj, { messages, t }) => ({ ...obj, [t]: messages }), {}),
+		[messageOriginsData],
+	);
+
+	const table = useMemo(
+		() =>
+			topFivePopularChannelsData?.channels?.reduce<
+				{
+					i: number;
+					t: string;
+					name?: string;
+					messages: number;
+				}[]
+			>((entries, { t, messages, name, usernames }, i) => [...entries, { i, t, name: name || usernames?.join(' × '), messages }], []),
+		[topFivePopularChannelsData],
+	);
+
+	return (
+		<>
+			<EngagementDashboardCardFilter>
+				<PeriodSelector {...periodSelectorProps} />
+				<DownloadDataButton
+					attachmentName={`MessagesPerChannelSection_start_${messageOriginsData?.start}_end_${messageOriginsData?.end}`}
+					headers={['Room Type', 'Messages']}
+					dataAvailable={!!messageOriginsData}
+					dataExtractor={(): unknown[][] | undefined => messageOriginsData?.origins.map(({ t, messages }) => [t, messages])}
+				/>
+			</EngagementDashboardCardFilter>
+
+			<FlexContainer>
+				<Margins inline='neg-x12'>
+					<Box>
+						<Margins inline={12}>
+							<FlexItem grow={1} shrink={0} basis='0'>
+								<Box>
+									<FlexContainer alignItems='center' wrap='no-wrap'>
+										{pie ? (
+											<Box>
+												<FlexItem grow={1} shrink={1}>
+													<Margins inline={24}>
+														<Box
+															style={{
+																position: 'relative',
+																height: 300,
+															}}
+														>
+															<Box
+																style={{
+																	position: 'absolute',
+																	width: '100%',
+																	height: '100%',
+																}}
+															>
+																<ResponsivePie
+																	data={[
+																		{
+																			id: 'd',
+																			label: t('Direct_Messages'),
+																			value: pie.d,
+																			color: colors.warning,
+																		},
+																		{
+																			id: 'p',
+																			label: t('Private_Channels'),
+																			value: pie.p,
+																			color: colors.success,
+																		},
+																		{
+																			id: 'c',
+																			label: t('Public_Channels'),
+																			value: pie.c,
+																			color: colors.info,
+																		},
+																	]}
+																	innerRadius={0.6}
+																	colors={[colors.warning, colors.success, colors.info]}
+																	animate={true}
+																	motionConfig='stiff'
+																	theme={{
+																		// TODO: Get it from theme
+																		axis: {
+																			ticks: {
+																				text: {
+																					fill: '#9EA2A8',
+																					fontFamily:
+																						'Inter, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", Arial, sans-serif',
+																					fontSize: 10,
+																					fontStyle: 'normal',
+																					fontWeight: 600,
+																					letterSpacing: '0.2px',
+																					lineHeight: '12px',
+																				},
+																			},
+																		},
+																	}}
+																	tooltip={({ datum }) => <Tooltip>{t('Value_messages', { value: datum.value })}</Tooltip>}
+																/>
+															</Box>
+														</Box>
+													</Margins>
+												</FlexItem>
+												<FlexItem basis='auto'>
+													<Margins block='neg-x4'>
+														<Box>
+															<Margins block={4}>
+																<Box color='hint' fontScale='p1'>
+																	<LegendSymbol color={colors.warning} />
+																	{t('Private_Chats')}
+																</Box>
+																<Box color='hint' fontScale='p1'>
+																	<LegendSymbol color={colors.success} />
+																	{t('Private_Channels')}
+																</Box>
+																<Box color='hint' fontScale='p1'>
+																	<LegendSymbol color={colors.info} />
+																	{t('Public_Channels')}
+																</Box>
+															</Margins>
+														</Box>
+													</Margins>
+												</FlexItem>
+											</Box>
+										) : (
+											<Skeleton variant='rect' height={300} />
+										)}
+									</FlexContainer>
+								</Box>
+							</FlexItem>
+							<FlexItem grow={1} shrink={0} basis='0'>
+								<Box>
+									<Margins blockEnd={16}>
+										{table ? <Box fontScale='p1'>{t('Most_popular_channels_top_5')}</Box> : <Skeleton width='50%' />}
+									</Margins>
+									{table && !table.length && (
+										<Tile fontScale='p1' color='hint' style={{ textAlign: 'center' }}>
+											{t('Not_enough_data')}
+										</Tile>
+									)}
+									{(!table || !!table.length) && (
+										<Table>
+											<TableHead>
+												<TableRow>
+													<TableCell>#</TableCell>
+													<TableCell>{t('Channel')}</TableCell>
+													<TableCell align='end'>{t('Number_of_messages')}</TableCell>
+												</TableRow>
+											</TableHead>
+											<TableBody>
+												{table?.map(({ i, t, name, messages }) => (
+													<TableRow key={i}>
+														<TableCell>{i + 1}.</TableCell>
+														<TableCell>
+															<Margins inlineEnd={4}>
+																{(t === 'd' && <Icon name='at' />) ||
+																	(t === 'p' && <Icon name='lock' />) ||
+																	(t === 'c' && <Icon name='hashtag' />)}
+															</Margins>
+															{name}
+														</TableCell>
+														<TableCell align='end'>{messages}</TableCell>
+													</TableRow>
+												))}
+												{!table &&
+													Array.from({ length: 5 }, (_, i) => (
+														<TableRow key={i}>
+															<TableCell>
+																<Skeleton width='100%' />
+															</TableCell>
+															<TableCell>
+																<Skeleton width='100%' />
+															</TableCell>
+															<TableCell align='end'>
+																<Skeleton width='100%' />
+															</TableCell>
+														</TableRow>
+													))}
+											</TableBody>
+										</Table>
+									)}
+								</Box>
+							</FlexItem>
+						</Margins>
+					</Box>
+				</Margins>
+			</FlexContainer>
+		</>
+	);
+};
+
+export default MessagesPerChannelSection;

apps/meteor/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx

@@ -0,0 +1,166 @@
+import { ResponsiveBar } from '@nivo/bar';
+import { Box, FlexContainer, FlexItem, Skeleton, Palette, Tooltip } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/dist/colors.json';
+import { differenceInDays, addDays, format } from 'date-fns';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton';
+import PeriodSelector from '../../../../components/dashboards/PeriodSelector';
+import { usePeriodLabel } from '../../../../components/dashboards/usePeriodLabel';
+import { usePeriodSelectorState } from '../../../../components/dashboards/usePeriodSelectorState';
+import CounterSet from '../../../../components/dataView/CounterSet';
+import EngagementDashboardCardFilter from '../EngagementDashboardCardFilter';
+import { useMessagesSent } from './useMessagesSent';
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+
+export type MessagesSentSectionProps = {
+	timezone: 'utc' | 'local';
+};
+
+const MessagesSentSection = ({ timezone }: MessagesSentSectionProps) => {
+	const [period, periodSelectorProps] = usePeriodSelectorState('last 7 days', 'last 30 days', 'last 90 days');
+	const periodLabel = usePeriodLabel(period);
+
+	const { t } = useTranslation();
+	const utc = timezone === 'utc';
+	const { data } = useMessagesSent({ period, utc });
+
+	const formatDate = useFormatDate();
+
+	const [countFromPeriod, variatonFromPeriod, countFromYesterday, variationFromYesterday, values] = useMemo(() => {
+		if (!data) {
+			return [];
+		}
+
+		const startDate = new Date(data.start);
+		const endDate = new Date(data.end);
+		const daysCount = differenceInDays(endDate, startDate) + 1;
+		const values = Array.from({ length: daysCount }, (_, i) => ({
+			date: addDays(startDate, i).toISOString(),
+			newMessages: 0,
+		}));
+
+		for (const { day, messages } of data.days ?? []) {
+			const i = differenceInDays(new Date(day), startDate);
+			if (i >= 0) {
+				values[i].newMessages += messages;
+			}
+		}
+
+		return [data.period?.count, data.period?.variation, data.yesterday?.count, data.yesterday?.variation, values];
+	}, [data]);
+
+	return (
+		<>
+			<EngagementDashboardCardFilter>
+				<PeriodSelector {...periodSelectorProps} />
+				<DownloadDataButton
+					attachmentName={`MessagesSentSection_start_${data?.start}_end_${data?.end}`}
+					headers={['Date', 'Messages']}
+					dataAvailable={!!data}
+					dataExtractor={(): unknown[][] | undefined => values?.map(({ date, newMessages }) => [date, newMessages])}
+				/>
+			</EngagementDashboardCardFilter>
+
+			<CounterSet
+				counters={[
+					{
+						count: countFromPeriod ?? <Skeleton variant='rect' width='3ex' height='1em' />,
+						variation: variatonFromPeriod ?? 0,
+						description: periodLabel,
+					},
+					{
+						count: countFromYesterday ?? <Skeleton variant='rect' width='3ex' height='1em' />,
+						variation: variationFromYesterday ?? 0,
+						description: t('Yesterday'),
+					},
+				]}
+			/>
+			<FlexContainer>
+				{values ? (
+					<Box style={{ height: 300 }}>
+						<FlexItem align='stretch' grow={1} shrink={0}>
+							<Box style={{ position: 'relative' }}>
+								<Box
+									style={{
+										position: 'absolute',
+										width: '100%',
+										height: '100%',
+									}}
+								>
+									<ResponsiveBar
+										data={values}
+										indexBy='date'
+										keys={['newMessages']}
+										groupMode='grouped'
+										padding={0.25}
+										margin={{
+											// TODO: Get it from theme
+											bottom: 50,
+											left: 20,
+											top: 20,
+										}}
+										colors={[
+											// TODO: Get it from theme
+											Palette.statusColor['status-font-on-info'].toString(),
+										]}
+										enableLabel={false}
+										enableGridY={false}
+										axisTop={null}
+										axisRight={null}
+										valueScale={{ type: 'linear' }}
+										axisBottom={{
+											tickSize: values.length > 31 ? 4 : 0,
+											// TODO: Get it from theme
+											tickPadding: 8,
+											tickRotation: values.length > 31 ? 90 : 0,
+											truncateTickAt: 0,
+											format: (date): string => format(new Date(date), 'dd/MM'),
+										}}
+										axisLeft={{
+											tickSize: 0,
+											// TODO: Get it from theme
+											tickPadding: 4,
+											tickRotation: 0,
+										}}
+										animate={true}
+										motionConfig='stiff'
+										theme={{
+											// TODO: Get it from theme
+											axis: {
+												ticks: {
+													text: {
+														fill: colors.n600,
+														fontFamily:
+															'Inter, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", Arial, sans-serif',
+														fontSize: '10px',
+														fontStyle: 'normal',
+														fontWeight: 600,
+														letterSpacing: '0.2px',
+														lineHeight: '12px',
+													},
+												},
+											},
+										}}
+										tooltip={({ value, indexValue }) => (
+											<Tooltip>
+												{t('Value_messages', { value })}, {formatDate(indexValue)}
+											</Tooltip>
+										)}
+									/>
+								</Box>
+							</Box>
+						</FlexItem>
+					</Box>
+				) : (
+					<Box>
+						<Skeleton variant='rect' height={240} />
+					</Box>
+				)}
+			</FlexContainer>
+		</>
+	);
+};
+
+export default MessagesSentSection;

apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx

@@ -0,0 +1,14 @@
+import { Margins } from '@rocket.chat/fuselage';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import MessagesTab from './MessagesTab';
+
+export default {
+	component: MessagesTab,
+	decorators: [(fn) => <Margins all='x24'>{fn()}</Margins>],
+} satisfies Meta<typeof MessagesTab>;
+
+export const Default: StoryObj<typeof MessagesTab> = {
+	render: () => <MessagesTab timezone='utc' />,
+	name: 'MessagesTab',
+};

apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+
+import EngagementDashboardCard from '../EngagementDashboardCard';
+import MessagesPerChannelSection from './MessagesPerChannelSection';
+import MessagesSentSection from './MessagesSentSection';
+
+export type MessagesTabProps = {
+	timezone: 'utc' | 'local';
+};
+
+const MessagesTab = ({ timezone }: MessagesTabProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<EngagementDashboardCard title={t('Messages_sent')}>
+				<MessagesSentSection timezone={timezone} />
+			</EngagementDashboardCard>
+			<EngagementDashboardCard title={t('Where_are_the_messages_being_sent?')}>
+				<MessagesPerChannelSection />
+			</EngagementDashboardCard>
+		</>
+	);
+};
+
+export default MessagesTab;

apps/meteor/client/views/admin/engagementDashboard/messages/useMessageOrigins.ts

@@ -0,0 +1,35 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import type { Period } from '../../../../components/dashboards/periods';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+
+type UseMessageOriginsOptions = { period: Period['key'] };
+
+export const useMessageOrigins = ({ period }: UseMessageOriginsOptions) => {
+	const getMessageOrigins = useEndpoint('GET', '/v1/engagement-dashboard/messages/origin');
+
+	return useQuery({
+		queryKey: ['admin/engagement-dashboard/messages/origins', { period }],
+
+		queryFn: async () => {
+			const { start, end } = getPeriodRange(period);
+
+			const response = await getMessageOrigins({
+				start: start.toISOString(),
+				end: end.toISOString(),
+			});
+
+			return response
+				? {
+						...response,
+						start,
+						end,
+					}
+				: undefined;
+		},
+
+		refetchInterval: 5 * 60 * 1000,
+		throwOnError: true,
+	});
+};

apps/meteor/client/views/admin/engagementDashboard/messages/useMessagesSent.spec.ts

@@ -0,0 +1,130 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useMessagesSent } from './useMessagesSent';
+
+beforeAll(() => {
+	jest.useFakeTimers().setSystemTime(new Date(2025, 4, 13));
+});
+
+afterAll(() => {
+	jest.useRealTimers();
+});
+
+it('should return utc time', async () => {
+	const expectedResult = {
+		days: [
+			{
+				day: 'Monday',
+				messages: 15,
+			},
+			{
+				day: 'Tuesday',
+				messages: 10,
+			},
+			{
+				day: 'Wednesday',
+				messages: 5,
+			},
+			{
+				day: 'Thursday',
+				messages: 0,
+			},
+			{
+				day: 'Friday',
+				messages: 0,
+			},
+			{
+				day: 'Saturday',
+				messages: 0,
+			},
+			{
+				day: 'Sunday',
+				messages: 0,
+			},
+		],
+		end: new Date('2025-05-13T23:59:59.999Z'),
+		period: {
+			count: 15,
+			variation: 2,
+		},
+		start: new Date('2025-05-11T00:00:00.000Z'),
+		success: true,
+		yesterday: {
+			count: 15,
+			variation: 3,
+		},
+	};
+	const { result } = renderHook(() => useMessagesSent({ period: 'this week', utc: true }), {
+		wrapper: mockAppRoot()
+			.withEndpoint('GET', '/v1/engagement-dashboard/messages/messages-sent', () => expectedResult)
+			.build(),
+	});
+
+	await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+	if (!result.current.data) {
+		throw new Error('Data is undefined');
+	}
+	expect(result.current.data).toEqual(expectedResult);
+});
+
+// CI is currently running in UTC, so no local time is returned
+// TODO: find a way to simulate local time properly in tests
+it.skip('should return local time', async () => {
+	const expectedResult = {
+		days: [
+			{
+				day: 'Monday',
+				messages: 15,
+			},
+			{
+				day: 'Tuesday',
+				messages: 10,
+			},
+			{
+				day: 'Wednesday',
+				messages: 5,
+			},
+			{
+				day: 'Thursday',
+				messages: 0,
+			},
+			{
+				day: 'Friday',
+				messages: 0,
+			},
+			{
+				day: 'Saturday',
+				messages: 0,
+			},
+			{
+				day: 'Sunday',
+				messages: 0,
+			},
+		],
+		end: new Date('2025-05-14T02:59:59.000Z'),
+		period: {
+			count: 15,
+			variation: 2,
+		},
+		start: new Date('2025-05-11T03:00:00.000Z'),
+		success: true,
+		yesterday: {
+			count: 15,
+			variation: 3,
+		},
+	};
+	const { result } = renderHook(() => useMessagesSent({ period: 'this week', utc: false }), {
+		wrapper: mockAppRoot()
+			.withEndpoint('GET', '/v1/engagement-dashboard/messages/messages-sent', () => expectedResult)
+			.build(),
+	});
+
+	await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+	if (!result.current.data) {
+		throw new Error('Data is undefined');
+	}
+	expect(result.current.data).toEqual(expectedResult);
+});

apps/meteor/client/views/admin/engagementDashboard/messages/useMessagesSent.ts

@@ -0,0 +1,35 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import type { Period } from '../../../../components/dashboards/periods';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+
+type UseMessagesSentOptions = { period: Period['key']; utc: boolean };
+
+export const useMessagesSent = ({ period, utc }: UseMessagesSentOptions) => {
+	const getMessagesSent = useEndpoint('GET', '/v1/engagement-dashboard/messages/messages-sent');
+
+	return useQuery({
+		queryKey: ['admin/engagement-dashboard/messages/messages-sent', { period, utc }],
+
+		queryFn: async () => {
+			const { start, end } = getPeriodRange(period, utc);
+
+			const response = await getMessagesSent({
+				start: start.toISOString(),
+				end: end.toISOString(),
+			});
+
+			return response
+				? {
+						...response,
+						start,
+						end,
+					}
+				: undefined;
+		},
+
+		refetchInterval: 5 * 60 * 1000,
+		throwOnError: true,
+	});
+};

apps/meteor/client/views/admin/engagementDashboard/messages/useTopFivePopularChannels.ts

@@ -0,0 +1,35 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import type { Period } from '../../../../components/dashboards/periods';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+
+type UseTopFivePopularChannelsOptions = { period: Period['key'] };
+
+export const useTopFivePopularChannels = ({ period }: UseTopFivePopularChannelsOptions) => {
+	const getTopFivePopularChannels = useEndpoint('GET', '/v1/engagement-dashboard/messages/top-five-popular-channels');
+
+	return useQuery({
+		queryKey: ['admin/engagement-dashboard/messages/top-five-popular-channels', { period }],
+
+		queryFn: async () => {
+			const { start, end } = getPeriodRange(period);
+
+			const response = await getTopFivePopularChannels({
+				start: start.toISOString(),
+				end: end.toISOString(),
+			});
+
+			return response
+				? {
+						...response,
+						start,
+						end,
+					}
+				: undefined;
+		},
+
+		refetchInterval: 5 * 60 * 1000,
+		throwOnError: true,
+	});
+};