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

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