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

apps/meteor/client/views/omnichannel/reports/ReportsPage.tsx

@@ -0,0 +1,53 @@
+import { Box, Grid, GridItem } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
+import { usePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { AgentsSection, ChannelsSection, DepartmentsSection, StatusSection, TagsSection } from './sections';
+import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const BREAKPOINTS = { xs: 4, sm: 8, md: 8, lg: 12, xl: 6 } as const;
+
+const ReportsPage = () => {
+	const { t } = useTranslation();
+
+	const hasPermission = usePermission('view-livechat-reports');
+	const { data: isEnterprise = false } = useHasLicenseModule('livechat-enterprise');
+
+	if (!hasPermission || !isEnterprise) {
+		return <NotAuthorizedPage />;
+	}
+
+	return (
+		<Page background='tint'>
+			<PageHeader title={t('Reports')} />
+			<Box is='p' color='hint' fontScale='p2' marginInline={24}>
+				{t('Omnichannel_Reports_Summary')}
+			</Box>
+			<PageScrollableContentWithShadow alignItems='center'>
+				<Box width='100rem' maxWidth='100%'>
+					<Grid>
+						<GridItem {...BREAKPOINTS}>
+							<StatusSection />
+						</GridItem>
+						<GridItem {...BREAKPOINTS}>
+							<ChannelsSection />
+						</GridItem>
+						<GridItem {...BREAKPOINTS}>
+							<DepartmentsSection />
+						</GridItem>
+						<GridItem {...BREAKPOINTS}>
+							<TagsSection />
+						</GridItem>
+						<GridItem {...BREAKPOINTS} xl={12}>
+							<AgentsSection />
+						</GridItem>
+					</Grid>
+				</Box>
+			</PageScrollableContentWithShadow>
+		</Page>
+	);
+};
+
+export default ReportsPage;

apps/meteor/client/views/omnichannel/reports/components/AgentsTable.tsx

@@ -0,0 +1,52 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableCell,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableRow,
+} from '@rocket.chat/ui-client';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type AgentsTableProps = {
+	data: {
+		label: string;
+		value: number;
+	}[];
+	sortBy: string;
+	sortDirection: 'asc' | 'desc';
+	setSort: (sortBy: 'name' | 'total', sortDirection: 'asc' | 'desc') => void;
+};
+
+export const AgentsTable = memo(({ data, sortBy, sortDirection, setSort }: AgentsTableProps) => {
+	const { t } = useTranslation();
+
+	const onHeaderClick = useStableCallback((id: 'name' | 'total') => {
+		setSort(id, sortDirection === 'asc' ? 'desc' : 'asc');
+	});
+
+	return (
+		<GenericTable>
+			<GenericTableHeader>
+				<GenericTableHeaderCell sort='name' direction={sortDirection} active={sortBy === 'name'} onClick={onHeaderClick}>
+					{t('Agents')}
+				</GenericTableHeaderCell>
+				<GenericTableHeaderCell sort='total' direction={sortDirection} active={sortBy === 'total'} onClick={onHeaderClick}>
+					{t('Total_conversations')}
+				</GenericTableHeaderCell>
+			</GenericTableHeader>
+			<GenericTableBody>
+				{data.map((item) => (
+					<GenericTableRow key={`${item.label}_${item.value}`}>
+						<GenericTableCell withTruncatedText>{item.label}</GenericTableCell>
+						<GenericTableCell>{item.value}</GenericTableCell>
+					</GenericTableRow>
+				))}
+			</GenericTableBody>
+		</GenericTable>
+	);
+});
+
+AgentsTable.displayName = 'AgentsTable';

apps/meteor/client/views/omnichannel/reports/components/BarChart.tsx

@@ -0,0 +1,150 @@
+import type { BarCustomLayerProps, BarDatum } from '@nivo/bar';
+import { ResponsiveBar } from '@nivo/bar';
+import { Box, Palette, Tooltip } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode, JSX } from 'react';
+import { useMemo } from 'react';
+
+import { REPORTS_CHARTS_THEME } from './constants';
+
+type axisItem = {
+	ticksPosition?: 'before' | 'after';
+	tickValues?: number;
+	tickSize?: number;
+	tickPadding?: number;
+	tickRotation?: number;
+	format?: string | ((v: string | number) => string | number);
+	renderTick?: (props: any) => JSX.Element;
+	legend?: ReactNode;
+	legendPosition?: 'start' | 'middle' | 'end';
+	legendOffset?: number;
+	ariaHidden?: boolean;
+};
+
+export type BarChartProps = {
+	data: {
+		label: string;
+		value: number;
+		color: string;
+	}[];
+	maxWidth?: string | number;
+	height: number;
+	direction?: 'vertical' | 'horizontal';
+	indexBy?: string;
+	keys?: string[];
+	reverse?: boolean;
+	margins?: { top?: number; right?: number; bottom?: number; left?: number };
+	axis: { axisTop?: axisItem; axisLeft?: axisItem; axisRight?: axisItem; axisBottom?: axisItem };
+	enableGridX?: boolean;
+	enableGridY?: boolean;
+	colors?: ComponentProps<typeof ResponsiveBar>['colors'];
+};
+
+const sideLabelStyle = {
+	fill: Palette.text['font-annotation'].toString(),
+	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: 12,
+};
+
+const horizontalSideLabel = ({ bars, labelSkipWidth }: BarCustomLayerProps<BarDatum>) => (
+	<g>
+		{bars?.map(({ width, height, y, data }) => {
+			if (width >= labelSkipWidth) {
+				return null;
+			}
+
+			return (
+				<text
+					key={data.indexValue}
+					transform={`translate(${width + 8}, ${y + height / 2})`}
+					textAnchor='start'
+					dominantBaseline='central'
+					style={sideLabelStyle}
+				>
+					{data.formattedValue}
+				</text>
+			);
+		})}
+	</g>
+);
+
+const verticalSideLabel = ({ bars, labelSkipHeight, innerHeight }: BarCustomLayerProps<BarDatum>) => (
+	<g>
+		{bars?.map(({ width, height, x, data }) => {
+			if (height >= labelSkipHeight) {
+				return null;
+			}
+
+			return (
+				<text
+					key={data.indexValue}
+					transform={`translate(${x + width / 2}, ${innerHeight - height - 8})`}
+					textAnchor='middle'
+					dominantBaseline='central'
+					style={sideLabelStyle}
+				>
+					{data.formattedValue}
+				</text>
+			);
+		})}
+	</g>
+);
+
+export const BarChart = ({
+	data,
+	maxWidth,
+	height,
+	direction = 'vertical',
+	indexBy = 'label',
+	keys,
+	margins,
+	reverse,
+	enableGridX = false,
+	enableGridY = false,
+	axis: { axisTop, axisLeft, axisRight, axisBottom } = {},
+	colors,
+}: BarChartProps) => {
+	const { minHeight, padding } = useMemo(() => {
+		const minHeight = data.length * 22;
+		const padding = data.length <= 4 ? 0.5 : 0.05;
+		return { minHeight, padding };
+	}, [data.length]);
+
+	const sideLabel: any = direction === 'vertical' ? verticalSideLabel : horizontalSideLabel;
+
+	return (
+		<Box maxWidth={maxWidth} height={height} overflowY='auto'>
+			<Box position='relative' height={Math.max(minHeight, height)} padding={8} overflow='hidden'>
+				<ResponsiveBar
+					animate
+					data={data}
+					indexBy={indexBy}
+					layout={direction}
+					layers={['grid', 'axes', 'bars', 'markers', 'legends', 'annotations', sideLabel]}
+					indexScale={{ type: 'band', round: false }}
+					keys={keys}
+					groupMode='grouped'
+					padding={padding}
+					colors={colors ?? { datum: 'data.color' }}
+					enableGridY={enableGridY}
+					enableGridX={enableGridX}
+					axisTop={axisTop || null}
+					axisRight={axisRight || null}
+					axisBottom={axisBottom || null}
+					axisLeft={axisLeft || null}
+					reverse={reverse}
+					borderRadius={4}
+					labelTextColor='white'
+					margin={margins}
+					motionConfig='stiff'
+					theme={REPORTS_CHARTS_THEME}
+					labelSkipWidth={direction === 'horizontal' ? 24 : undefined}
+					labelSkipHeight={direction === 'vertical' ? 16 : undefined}
+					valueScale={{ type: 'linear' }}
+					tooltip={({ data }) => <Tooltip>{`${data.label}: ${data.value}`}</Tooltip>}
+					barAriaLabel={({ data }) => data.label}
+				/>
+			</Box>
+		</Box>
+	);
+};

apps/meteor/client/views/omnichannel/reports/components/PieChart.tsx

@@ -0,0 +1,59 @@
+import { Pie } from '@nivo/pie';
+import { Tooltip } from '@rocket.chat/fuselage';
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import type { ComponentProps } from 'react';
+
+import { REPORTS_CHARTS_THEME } from './constants';
+
+const legendItemHeight = 20;
+const legendItemWidth = 200;
+const legendItemsSpacing = 8;
+const legendSpacing = 24;
+const legendInlineSize = legendItemWidth + legendSpacing;
+
+export const PieChart = ({
+	data,
+	width,
+	height,
+	colors,
+}: {
+	data: { label: string; value: number; id: string; color?: string }[];
+	width: number;
+	height: number;
+	colors?: ComponentProps<typeof Pie>['colors'];
+}) => {
+	const breakpoints = useBreakpoints();
+	const isSmallScreen = !breakpoints.includes('md');
+	const legendBlockSize = data.length * (legendItemHeight + legendItemsSpacing) + legendSpacing;
+
+	return (
+		<Pie
+			data={data}
+			innerRadius={0.6}
+			colors={colors ?? { datum: 'data.color' }}
+			motionConfig='stiff'
+			theme={REPORTS_CHARTS_THEME}
+			enableArcLinkLabels={false}
+			enableArcLabels={false}
+			tooltip={({ datum }) => <Tooltip>{datum.label}</Tooltip>}
+			width={isSmallScreen ? width : width + legendInlineSize}
+			height={isSmallScreen ? height + legendBlockSize : height}
+			margin={isSmallScreen ? { top: legendBlockSize } : { right: legendInlineSize }}
+			legends={[
+				{
+					direction: 'column',
+					justify: false,
+					symbolSize: 12,
+					itemDirection: 'left-to-right',
+					symbolShape: 'circle',
+					anchor: isSmallScreen ? 'top' : 'right',
+					translateX: isSmallScreen ? 0 : legendInlineSize,
+					translateY: isSmallScreen ? legendBlockSize * -1 : 0,
+					itemWidth: legendItemWidth,
+					itemHeight: legendItemHeight,
+					itemsSpacing: legendItemsSpacing,
+				},
+			]}
+		/>
+	);
+};

apps/meteor/client/views/omnichannel/reports/components/ReportCard.tsx

@@ -0,0 +1,62 @@
+import { Box, Card, CardTitle, CardBody, CardCol, CardRow } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { ReportCardContent } from './ReportCardContent';
+import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton';
+import PeriodSelector from '../../../../components/dashboards/PeriodSelector';
+
+export type ReportCardProps = {
+	id: string;
+	title: string;
+	children: ReactNode;
+	periodSelectorProps: ComponentProps<typeof PeriodSelector>;
+	downloadProps: ComponentProps<typeof DownloadDataButton>;
+	isPending?: boolean;
+	isDataFound?: boolean;
+	minHeight?: number;
+	subtitle?: string;
+	emptyStateSubtitle?: string;
+	isError?: boolean;
+	onRetry?: () => void;
+	chartHeight?: number;
+};
+
+export const ReportCard = forwardRef<HTMLElement, ReportCardProps>(function ReportCard(
+	{ id, title, children, periodSelectorProps, downloadProps, isPending, isDataFound, subtitle, emptyStateSubtitle, isError, onRetry },
+	ref,
+) {
+	return (
+		<Box height='full' ref={ref}>
+			<Card height='full' aria-busy={isPending} data-qa={id}>
+				<Box rcx-card__header justifyContent='space-between'>
+					<CardCol>
+						<CardTitle>{title}</CardTitle>
+						<Box is='span' color='hint' fontScale='c1' data-qa='report-summary'>
+							{subtitle}
+						</Box>
+					</CardCol>
+					<CardCol>
+						<CardRow>
+							<PeriodSelector name='periodSelector' {...periodSelectorProps} />
+							<DownloadDataButton {...downloadProps} title='Download CSV' size={32} />
+						</CardRow>
+					</CardCol>
+				</Box>
+				<CardBody flexDirection='column' height='full'>
+					<Box height='full' display='flex' flexDirection='column' justifyContent='center'>
+						<ReportCardContent
+							isPending={isPending}
+							isDataFound={isDataFound}
+							isError={isError}
+							onRetry={onRetry}
+							subtitle={emptyStateSubtitle}
+						>
+							{children}
+						</ReportCardContent>
+					</Box>
+				</CardBody>
+			</Card>
+		</Box>
+	);
+});

apps/meteor/client/views/omnichannel/reports/components/ReportCardContent.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+import { ReportCardEmptyState } from './ReportCardEmptyState';
+import { ReportCardErrorState } from './ReportCardErrorState';
+import { ReportCardLoadingState } from './ReportCardLoadingState';
+
+export type ReportCardContentProps = {
+	isPending?: boolean;
+	isError?: boolean;
+	isDataFound?: boolean;
+	subtitle?: string;
+	onRetry?: () => void;
+	children: ReactNode;
+};
+export const ReportCardContent = ({ isPending, isError, isDataFound, subtitle, onRetry, children }: ReportCardContentProps) => {
+	if (isPending) {
+		return <ReportCardLoadingState />;
+	}
+	if (isError) {
+		return <ReportCardErrorState onRetry={onRetry} />;
+	}
+	if (!isDataFound) {
+		return <ReportCardEmptyState subtitle={subtitle} />;
+	}
+	return children;
+};

apps/meteor/client/views/omnichannel/reports/components/ReportCardEmptyState.tsx

@@ -0,0 +1,20 @@
+import { States, StatesIcon, StatesTitle, StatesSubtitle } from '@rocket.chat/fuselage';
+import type { Keys } from '@rocket.chat/icons';
+import { useTranslation } from 'react-i18next';
+
+type CardEmpryStateProps = {
+	icon?: Keys;
+	subtitle?: string;
+};
+
+export const ReportCardEmptyState = ({ icon, subtitle }: CardEmpryStateProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<States width='100%' height='100%'>
+			<StatesIcon name={icon || 'dashboard'} />
+			<StatesTitle>{t('No_data_available_for_the_selected_period')}</StatesTitle>
+			{subtitle && <StatesSubtitle>{subtitle}</StatesSubtitle>}
+		</States>
+	);
+};

apps/meteor/client/views/omnichannel/reports/components/ReportCardErrorState.tsx

@@ -0,0 +1,20 @@
+import { States, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+export type ReportCardErrorStateProps = {
+	onRetry?: () => void;
+};
+
+export const ReportCardErrorState = ({ onRetry }: ReportCardErrorStateProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<States width='100%' height='100%'>
+			<StatesIcon name='circle-exclamation' />
+			<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+			<StatesActions>
+				<StatesAction onClick={onRetry}>{t('Retry')}</StatesAction>
+			</StatesActions>
+		</States>
+	);
+};

apps/meteor/client/views/omnichannel/reports/components/ReportCardLoadingState.tsx

@@ -0,0 +1,16 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+
+export const ReportCardLoadingState = () => (
+	<Box display='flex' height='100%' width='100%'>
+		<Box flexGrow={1}>
+			<Skeleton style={{ transform: 'none' }} height='100%' marginBlock={8} marginInlineEnd={16} />
+		</Box>
+		<Box flexGrow={1}>
+			<Skeleton height={28} />
+			<Skeleton height={28} />
+			<Skeleton height={28} />
+			<Skeleton height={28} />
+			<Skeleton height={28} />
+		</Box>
+	</Box>
+);

apps/meteor/client/views/omnichannel/reports/components/constants.ts

@@ -0,0 +1,44 @@
+import { Palette } from '@rocket.chat/fuselage';
+
+import type { Period } from '../../../../components/dashboards/periods';
+
+export const REPORTS_CHARTS_THEME = {
+	labels: {
+		text: { fontSize: 12 },
+	},
+	legends: {
+		text: {
+			fill: Palette.text['font-annotation'].toString(),
+		},
+	},
+	axis: {
+		domain: {
+			line: {
+				stroke: Palette.text['font-annotation'].toString(),
+				strokeWidth: 1,
+			},
+		},
+		ticks: {
+			text: {
+				fill: Palette.text['font-annotation'].toString(),
+				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: 12,
+				fontStyle: 'normal',
+				letterSpacing: '0.2px',
+				lineHeight: '16px',
+			},
+		},
+	},
+};
+
+export const COLORS = {
+	service2: Palette.statusColor['status-font-on-service-2'].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(),
+	warning: Palette.statusColor['status-font-on-warning'].toString(),
+	warning2: Palette.statusColor['status-font-on-warning-2'].toString(),
+};
+
+export const PERIOD_OPTIONS: Period['key'][] = ['today', 'this week', 'last 15 days', 'this month', 'last 6 months', 'this year'];

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

@@ -0,0 +1,7 @@
+export * from './AgentsTable';
+export * from './BarChart';
+export * from './PieChart';
+export * from './ReportCard';
+export * from './ReportCardErrorState';
+export * from './ReportCardLoadingState';
+export * from './ReportCardEmptyState';

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],
+	);
+};

apps/meteor/client/views/omnichannel/reports/sections/AgentsSection.tsx

@@ -0,0 +1,54 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import { useTranslation } from 'react-i18next';
+
+import { AgentsTable, BarChart, ReportCard } from '../components';
+import { useAgentsSection } from '../hooks';
+import { ellipsis } from '../utils/ellipsis';
+
+const BREAKPOINT = 768;
+
+export const AgentsSection = () => {
+	const { data, sortBy, sortDirection, setSort, ...config } = useAgentsSection();
+	const { t } = useTranslation();
+
+	const { ref, contentBoxSize: { inlineSize: cardWidth = 200 } = {} } = useResizeObserver<HTMLElement>();
+	const width = cardWidth * 0.9;
+	const wrapped = cardWidth ? cardWidth < BREAKPOINT : false;
+
+	return (
+		<ReportCard ref={ref} {...config}>
+			<Box display='flex' flexDirection={wrapped ? 'column' : 'row'}>
+				<Box flexGrow={1}>
+					<Box is='p' fontScale='p2' marginBlockEnd={8}>
+						{t('Top_5_agents_with_the_most_conversations')}
+					</Box>
+					<BarChart
+						data={data.slice(0, 5)}
+						maxWidth={wrapped ? width : width / 2}
+						height={360}
+						indexBy='label'
+						keys={['value']}
+						margins={{ top: 40, right: 20, bottom: 48, left: 20 }}
+						axis={{
+							axisBottom: {
+								tickSize: 0,
+								tickRotation: 0,
+								format: (v) => ellipsis(v, 10),
+							},
+							axisLeft: {
+								tickSize: 0,
+								tickRotation: 0,
+								tickValues: 4,
+							},
+						}}
+					/>
+				</Box>
+
+				<Box display='flex' height='x360' minWidth='50%' flexGrow={1}>
+					<AgentsTable data={data} sortBy={sortBy} sortDirection={sortDirection} setSort={setSort} />
+				</Box>
+			</Box>
+		</ReportCard>
+	);
+};

apps/meteor/client/views/omnichannel/reports/sections/ChannelsSection.tsx

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+
+import { PieChart, ReportCard } from '../components';
+import { COLORS } from '../components/constants';
+import { useChannelsSection } from '../hooks';
+
+export const ChannelsSection = () => {
+	const { data, ...config } = useChannelsSection();
+	const colors = useMemo(() => Object.values(COLORS), []);
+
+	return (
+		<ReportCard {...config}>
+			<PieChart data={data} width={200} height={200} colors={colors} />
+		</ReportCard>
+	);
+};

apps/meteor/client/views/omnichannel/reports/sections/DepartmentsSection.tsx

@@ -0,0 +1,31 @@
+import { BarChart, ReportCard } from '../components';
+import { useDepartmentsSection } from '../hooks';
+import { ellipsis } from '../utils/ellipsis';
+
+export const DepartmentsSection = () => {
+	const { data, ...config } = useDepartmentsSection();
+
+	return (
+		<ReportCard {...config}>
+			<BarChart
+				data={data}
+				direction='horizontal'
+				height={360}
+				margins={{ left: 92, top: 30, right: 8 }}
+				axis={{
+					axisLeft: {
+						tickSize: 0,
+						tickRotation: 0,
+						format: (v) => ellipsis(v, 10),
+					},
+					axisTop: {
+						tickSize: 0,
+						tickRotation: 0,
+						tickValues: 4,
+						format: (v) => ellipsis(v, 10),
+					},
+				}}
+			/>
+		</ReportCard>
+	);
+};

apps/meteor/client/views/omnichannel/reports/sections/StatusSection.tsx

@@ -0,0 +1,12 @@
+import { PieChart, ReportCard } from '../components';
+import { useStatusSection } from '../hooks';
+
+export const StatusSection = () => {
+	const { data, ...config } = useStatusSection();
+
+	return (
+		<ReportCard {...config}>
+			<PieChart data={data} width={200} height={200} />
+		</ReportCard>
+	);
+};

apps/meteor/client/views/omnichannel/reports/sections/TagsSection.tsx

@@ -0,0 +1,34 @@
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+
+import { BarChart, ReportCard } from '../components';
+import { useTagsSection } from '../hooks';
+import { ellipsis } from '../utils/ellipsis';
+
+export const TagsSection = () => {
+	const { data, ...config } = useTagsSection();
+	const { ref } = useResizeObserver<HTMLElement>();
+
+	return (
+		<ReportCard ref={ref} {...config}>
+			<BarChart
+				data={data}
+				direction='horizontal'
+				height={360}
+				margins={{ left: 92, top: 30, right: 8 }}
+				axis={{
+					axisLeft: {
+						tickSize: 0,
+						tickRotation: 0,
+						format: (v) => ellipsis(v, 10),
+					},
+					axisTop: {
+						tickSize: 0,
+						tickRotation: 0,
+						tickValues: 4,
+						format: (v) => ellipsis(v, 10),
+					},
+				}}
+			/>
+		</ReportCard>
+	);
+};

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

@@ -0,0 +1,5 @@
+export * from './AgentsSection';
+export * from './DepartmentsSection';
+export * from './StatusSection';
+export * from './TagsSection';
+export * from './ChannelsSection';

apps/meteor/client/views/omnichannel/reports/utils/ellipsis.ts

@@ -0,0 +1,3 @@
+export const ellipsis = (value: string | number, max: number) => {
+	return String(value).length > max ? `${String(value).substring(0, max)}...` : value;
+};

apps/meteor/client/views/omnichannel/reports/utils/formatAttachmentName.ts

@@ -0,0 +1,2 @@
+export const formatAttachmentName = (attachmentName: string, start: string, end: string): string =>
+	`${attachmentName.toLocaleLowerCase().replace(/ /g, '_')}_${start}_${end}`;

apps/meteor/client/views/omnichannel/reports/utils/formatPeriodDescription.ts

@@ -0,0 +1,8 @@
+import type { TFunction } from 'i18next';
+
+import { getPeriod, type Period } from '../../../../components/dashboards/periods';
+
+export const formatPeriodDescription = (periodKey: Period['key'], t: TFunction) => {
+	const { label } = getPeriod(periodKey);
+	return t(...label).toLocaleLowerCase();
+};

apps/meteor/client/views/omnichannel/reports/utils/formatPeriodRange.ts

@@ -0,0 +1,18 @@
+import type { Period } from '../../../../components/dashboards/periods';
+import { getPeriodRange } from '../../../../components/dashboards/periods';
+
+const formatDate = (date: Date): string => {
+	const day = String(date.getDate()).padStart(2, '0');
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const year = date.getFullYear();
+
+	return `${year}-${month}-${day}`;
+};
+
+export const formatPeriodRange = (period: Period['key']): { start: string; end: string } => {
+	const { start, end } = getPeriodRange(period);
+	return {
+		start: formatDate(start),
+		end: formatDate(end),
+	};
+};

apps/meteor/client/views/omnichannel/reports/utils/getTop.ts

@@ -0,0 +1,10 @@
+export const getTop = <T extends { label: string; value: number }>(limit = 5, data: T[], formatter: (others: number) => T): T[] => {
+	if (data.length < limit) {
+		return data;
+	}
+
+	const topItems = data.slice(0, limit);
+	const othersValue = data.slice(limit).reduce((total, item) => total + item.value, 0);
+
+	return othersValue > 0 ? [...topItems, formatter(othersValue)] : topItems;
+};

apps/meteor/client/views/omnichannel/reports/utils/round.ts

@@ -0,0 +1,4 @@
+export const round = (value: number, decimals = 2) => {
+	const multiplier = Math.pow(10, decimals);
+	return Math.round(value * multiplier) / multiplier;
+};