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

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';